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

约定不等于承诺〃 2023-07-10 15:59 563阅读 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>

##### 效果图： #####

![在这里插入图片描述][20200303214220311.gif]

[20200303214220311.gif]: https://img-blog.csdnimg.cn/20200303214220311.gif

发表评论取消回复

表情：

评论列表（有 0 条评论，563人围观）

还没有评论，来说两句吧...

相关阅读

相关 DOM操作--创建、插入、删除元素

1、创建、插入元素 <!DOCTYPE html> <html> <head> <meta charset="utf-8">

ゞ浴缸里的玫瑰/ 2024年02月17日 23:03/ 0 赞/ 59 阅读

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

练习描述：在页面中每隔一段时间创建一个图片图片大小随机位置随机进而实现星星的出现 <!DOCTYPE html> <html lang="en"

约定不等于承诺〃/ 2023年07月10日 15:59/ 0 赞/ 564 阅读

相关 php 数组添加元素、删除元素

拆分数组 PHP数组添加一个元素的方式： push(), arr\[\], Php代码 $arr = array(); array_push($

拼搏现实的明天。/ 2022年09月24日 14:23/ 0 赞/ 281 阅读

相关删除元素

题目描述输入一个递增有序的整型数组A有n个元素，删除下标为i的元素，使其仍保持连续有序。注意，有效下标从0开始。定义如下两个函数分别实现删除元素操作和数组输出操作。

男娘i/ 2022年08月06日 11:20/ 0 赞/ 240 阅读

相关 js动态创建/删除（页面）元素节点、设置其属性方法

在项目过程中，多数情况下，一个页面是满足不了要求的，这时就需要多个页面相互切换，进行交互，js可以动态的创建一个页面，在不需要的时候删除。方法如下：创建方法：crea

冷不防/ 2022年06月04日 08:05/ 0 赞/ 225 阅读

相关删除元素

题目：输入一个递增有序的整型数组A有n个元素，删除下标为i的元素，使其仍保持连续有序。注意，有效下标从0开始。定义如下两个函数分别实现删除元素操作和数组输出操作。 vo

r囧r小猫/ 2022年06月02日 00:24/ 0 赞/ 237 阅读

相关删除和隐藏元素

删除id为div1的元素 $("\div1").remove(); 删除 class=“italic” 的所有元素： $(“p”).remove(".ital

心已赠人/ 2022年02月02日 12:47/ 0 赞/ 281 阅读

相关 Jquery元素追加和删除

介绍 DOM是Document Object Modeule的缩写，一般来说，DOM操作分成3个方面。 1、DOM Core DOM Core并不专属于javasc

ゞ浴缸里的玫瑰/ 2022年01月07日 00:41/ 0 赞/ 330 阅读

相关 jQuery - 删除元素

删除元素/内容如需删除元素和内容，一般可使用以下两个 jQuery 方法： remove() - 删除被选元素（及其子元素） empty() - 从被选元

- 日理万妓/ 2021年09月15日 07:46/ 0 赞/ 521 阅读

相关 JavaScript创建、添加、删除元素

（1）createElement("元素名")：此方法可以创建一个新的元素。例如：createElement("p") ，表示创建了一个p标签（元素/段落）。（2）crea

Bertha 。/ 2021年09月14日 02:20/ 0 赞/ 563 阅读