这个案例的实现逻辑是当你点击屏幕时,会完成一个事件,在你的屏幕上生成一张星星图片。然后再设置星星图片的大小将其改为随机。
代码
<!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>
结果
不嫌弃的点点关注,点点赞 ଘ(੭ˊᵕˋ)੭* ੈ✩‧