一闪一闪亮晶晶，满屏都是小星星

代森森

已于 2022-03-23 23:52:38 修改

阅读量1.4k

点赞数 4

分类专栏：案例向文章标签： javascript css3 前端

于 2022-03-23 23:51:58 首次发布

本文链接：https://blog.csdn.net/ovocc/article/details/123699837

版权

案例向专栏收录该内容

15 篇文章 1 订阅

订阅专栏

该博客描述如果使用JavaScript实现随机生成星星并点击消失的小游戏。

效果：
请添加图片描述

代码：
html:因为是JavaScript动态生成小星星和点击消失，所以body里面不需要手动添加元素
css:

        body {
            position: relative;
            background-color: black;
        }
        
        div {
            position: absolute;
            width: 50px;
            height: 50px;
        }
        
        div img {
            width: 100%;
            height: 100%;
        }

javascript:

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

        window.addEventListener('load', function() {

            var creatstar = setInterval(function() {
                var div = document.createElement('div');
                var starWidth = getRandom(20, 100);
                var starHeight = starWidth;
                var starLeft = getRandom(0, window.innerWidth - starWidth - 50);
                var starTop = getRandom(0, window.innerHeight - starHeight - 50);
                div.style.top = starTop + 'px';
                div.style.left = starLeft + 'px';
                div.style.width = starWidth + 'px';
                div.style.height = starHeight + 'px';
                document.body.appendChild(div);
                var img = document.createElement('img');
                img.src = 'xingxing.gif';
                div.appendChild(img);
            }, 1000);

            document.addEventListener('click', function(e) {
                document.body.removeChild(e.target.parentNode);
            });
        });