JS---------------网页版的消灭星星

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、效果展示

二、实现过程

1.案例分析

• 布局分析： 以body 为框在里面动态的添加图片
• 效果分析： 每隔1秒钟自动生成一颗星星，点击星星把本颗星移除节点。
  注意： 点击的时候是点击的图片 ，移除的节点是图片的父节点。

2.代码展示

代码如下（示例）：

<style>
        body {
            background-color: #000;
            overflow: hidden;
        }
        
        .box {
            position: absolute;
            top: 0;
            left: 0;
            width: 80px;
            height: 80px;
        }
        
        .box img {
            width: 100%;
            height: 100%;
        }
    </style>

 <script>
        function getRandom(min, max) {
            return Math.floor(Math.random() * (max - min + 1) + min);
        }
        Xing();

       function Xing() {
            var newbox = document.createElement('div');
            newbox.className = 'box';
            var img = document.createElement('img');
            img.src = 'images/xingxing.gif';
            newbox.appendChild(img);
            var w = getRandom(10, 80) + 'px';
            newbox.style.width = w;
            newbox.style.height = w;
            newbox.style.top = getRandom(0, window.innerHeight) + 'px';
            newbox.style.left = getRandom(0, window.innerWidth) + 'px';
            document.body.appendChild(newbox);
        }
        var timer = setInterval(Xing, 1000);
        document.addEventListener('click', function(e) {
            document.body.removeChild(e.target.parentNode);
        });
    </script>

---