首页 > 其他 > 详细

消灭星星

时间:2020-07-09 21:16:28      阅读:47      评论:0      收藏:0      [点我收藏+]

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            background:#000;
        }
    </style>
</head>
<body>
    <img src="" alt="" width=‘‘>
    <script>
        /*
            不断地 在不同位置 出现大小不同星星[10-60] 并且可以点掉消失

            开启间歇定时器 创建星星 创建元素 添加属性 地址 样式
            1.不同位置 随机数 定位
            2.不同大小 随机数 宽
            3.点击消失 删除元素
        */

        setInterval(function(){
            // 创造星星
            var newImg = document.createElement(img);
            // 在创建的元素写入图片地址
            newImg.src = images/star.png;
            // 星星定位
            newImg.setAttribute(style,"position:absolute;top:"+getRandom(597,0)+"px;left:"+ getRandom(1306,0)+"px");
            // 星星大小
            newImg.setAttribute(width,getRandom(60,10) + px)
            // newImg.style.position = ‘absolute‘;
            // // 星星定位
            // newImg.style.top = getRandom(597,0) + ‘px‘;
            // newImg.style.left = getRandom(1306,0) + ‘px‘;

            // 星星大小
            // newImg.style.width = getRandom(60,10) + ‘px‘;
            // 插入到body中
            document.body.appendChild(newImg);

            // 删除星星
            newImg.onclick = function(){
                newImg.remove();
            }
        },300)

        // 获取随机数公式
        function getRandom(max,min){
            var num = Math.floor(Math.random()*((max - min + 1) + min));
            return num;
        }


    </script>
</body>
</html>

 

效果

技术分享图片

消灭星星

原文:https://www.cnblogs.com/shihaiying/p/13275804.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!