JavaScript 实现点击生成漫天星星特效
作者:代码拾荒时间:2026-10-21 20:43:16浏览:273
本文分享了一段使用 JavaScript 实现的点击鼠标生成漫天星星的特效代码。通过监听 HTML 元素的点击事件,动态创建 img 节点并追加到页面,利用随机函数控制星星的大小和位置,实现简单的星空闪烁效果。
JavaScript 实现点击生成漫天星星特效
本文分享了一段用于实现点击鼠标生成漫天星星特效的 JavaScript 代码,供读者参考学习。
具体运行效果如下图所示:

核心实现代码如下:
<html onclick="init(event)">
<head>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<script type="text/javascript">
//点出漫天小星星
//背景色
//给html添加onclick事件
//创建图片节点,并追加到body父节点下
//图片的随机大小
function init(e){
//创建图片节点(在内存中,还看不见)
var imgObj=document.createElement("img");
//追加节点
document.body.appendChild(imgObj);
//添加属性
imgObj.src="xingxing.gif";
//添加width属性
imgObj.width=getRandom(15,85);
//定位
var x=e.clientX? e.clientX : event.clientX;
var y=e.clientY? e.clientY : event.clientY;
imgObj.style.position="absolute";
imgObj.style.left=x - imgObj.width/2+"px";
imgObj.style.top=y- imgObj.width/2+"px";
}
function getRandom(min,max){
return Math.floor(Math.random()*(max-min)+min);
}
</script>
</head>
<body style="background-color:black" >
</body>
</html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持本站。
作者最新文章
JavaScript异步发送HTTP请求时怎么优雅地处理错误
2026-11-05 17:10:44
5款主流JS在线运行工具对比:CodePen、JSFiddle与StackBlitz怎么选
2026-11-05 17:04:04
JavaScript入门书籍避坑:这些书不适合初学者
2026-11-05 16:31:15
JS使用Math.round实现保留两位小数的原理与代码
2026-11-05 15:35:55
JavaScript 原生 Date 对象怎么实现日期加减
2026-11-05 14:30:00
