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);
            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>

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
THE END
分享
二维码
< <上一篇
下一篇>>