2.24.1-练习：动态创建元素和删除元素

最新推荐文章于 2020-05-28 14:41:44 发布

越努力越

最新推荐文章于 2020-05-28 14:41:44 发布

阅读量127

点赞数

分类专栏： JavaScript 文章标签： javascript html

本文链接：https://blog.csdn.net/weixin_45353679/article/details/104642351

版权

JavaScript 专栏收录该内容

32 篇文章 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-color: black;
        }
    </style>
</head>

<body>
    <script>
        //定时器
        setInterval(createElement, 1000);
        setInterval(deleteElement, 1700);
        //创建一个创建元素的函数
        function createElement() {
            var oimg = document.createElement('img');
            oimg.src = 'star.gif';
            //添加到界面
            document.body.appendChild(oimg);
            var randNum = rand(10, 30);
            //图片宽高等于一个随机数
            oimg.width = oimg.height = randNum;
            oimg.style.position = 'absolute';
            //给图片一个随机的位置
            var _left = rand(0, window.innerWidth - randNum);
            var _top = rand(0, window.innerHeight - randNum);
            oimg.style.left = _left + 'px';
            oimg.style.top = _top + 'px';

            //点击删除元素
            oimg.onclick = function() {
                this.remove();
            }
        }
        //产生一个随机数
        function rand(min, max) {
            return Math.round(Math.random() * (max - min)) + min;
        }
        //定义一个自动删除星星的函数
        function deleteElement() {
           var imgNum = document.getElementsByTagName('img');
           var randNum = rand(0, imgNum.length - 1);
            //星星数大于10，随机删除一个星星
           if (imgNum.length　 > 10) {
                imgNum[randNum].remove();
            }
        }
    </script>
</body>

</html>

效果图：

在这里插入图片描述

越努力越

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2.24.1-练习：动态创建元素和删除元素

练习描述：在页面中每隔一段时间创建一个图片图片大小随机位置随机进而实现星星的出现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, init...
复制链接

扫一扫