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>functiongetRandom(min, max){return Math.floor(Math.random()*(max - min +1)+ min);}Xing();functionXing(){var newbox = document.createElement('div');
            newbox.className ='box';var img = document.createElement('img');
            img.src ='images/xingxing.gif';
            newbox.appendChild(img);
            document.body.appendChild(newbox);var w =getRandom(10,80)+'px';
            newbox.style.width = w;
            newbox.style.height = w;
            newbox.style.top =getRandom(0,680)+'px';
            newbox.style.left =getRandom(0, document.body.clientWidth)+'px';
            document.body.appendChild(newbox);}var box = document.querySelector('.box');var timer =setInterval(Xing,1000);
        document.addEventListener('click',function(e){
            document.body.removeChild(e.target.parentNode);})</script>