这篇博客介绍了一段JavaScript代码，用于在网页上实现用户点击时生成随机大小和位置的星星图案并飘落，星星在屏幕上停留1秒后自动消失。通过设置CSS样式和JavaScript事件监听，为网页添加趣味互动元素。
<style type="text/css">
设置页面样式：
*{
margin: 0;padding: 0;
}
body{
position: relative;
}
img{
position: absolute;
}
</style>
</head>
<body>
<br id="end">
<img src="../img/starsel.png" > //星星图案
<script type="text/javascript">
document.onclick = function(e){
console.log("点击了屏幕", e.clientX,e.clientY);
// 创建星星
let star = document.createElement("img")
//写入属性
star.setAttribute("src","../img/starsel.png")
// 随机宽高
let width = parseInt(Math.random()*30)+20;
star.style.width = width+"px";
star.style.height = width+"px";
// 设置元素样式
star.style.left = e.clientX-(width/2)+"px";
star.style.top = e.clientY-(width/2)+"px";
// 创建好的星星插入文档
let end = document.getElementById("end");
document.body.insertBefore(star, end);
//
setTimeout(function(){
star.remove()
},1000)
}
</script>
扫一扫
1625
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
