前端学习之DOM编程星星点灯案例

news2024/11/18 10:46:18

这个案例的实现逻辑是当你点击屏幕时，会完成一个事件，在你的屏幕上生成一张星星图片。然后再设置星星图片的大小将其改为随机。

代码

<!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>