这个案例的实现逻辑是当你点击屏幕时，会完成一个事件，在你的屏幕上生成一张星星图片。然后再设置星星图片的大小将其改为随机。
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>星星点灯</title>
<style>
*{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<script>
// 只有当文件加载完毕后才可以添加
window.onload = function(){
document.onclick = function(event){
console.log(event.pageX)
console.log(event.pageY)
let img = document.createElement('img')
img.src = './星星素材.gif'
img.style.position = 'absolute'
w = getRandom(20,200)
// 将图片出现在你点击的位置
img.style.left = (event.pageX-w/2) + 'px'
img.style.top = (event.pageY-w/2) + 'px'
// 让图片随机大小
img.style.width = w + 'px'
img.style.height = w + 'px'
document.body.appendChild(img)
}
}
function getRandom(min,max){
return min + Math.ceil((max-min)*Math.random())
}
document.body.style.background = '#000000'
</script>
</body>
</html>结果
不嫌弃的点点关注，点点赞 ଘ(੭ˊᵕˋ)੭* ੈ✩‧
7万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
