通过 JavaScript 的 DOM 操作，实现动态元素创建，实现在夜空中动态添加任意大小的星星，且也可删除的任意星星的操作

Ⅰ、问题描述：
1、用 JavaScript + css 实现，动态元素创建、动态添加星星图片，删除任意星星图片；
2、分析：
A、设置整个的 body 背景图片信息；
B、设置获取从 a 到 b 的任意大小整值的函数；
C、通过 DOM 操作动态创建 img 信息、获取星星图片，设置星星图片的大小、删除任意图片等操作；

Ⅱ、实现过程如下：

1、运行软件VScode，亲测可实现；
2、运行代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
    
             /* 设置整个页面背景色为黑色； */
      background-color: #000;
    }
  </style>
</head>
<body>
  <script>
    function rand(min,max) {
    
        //取到从 min 到 max 任意一个值的随机函数；
      return Math.round(Math.random()*(max-min)) + min;//具体的实现原理；
    }

    setInterval(createImg,500); //设置一个定时器，每 500ms 刷新一次页面；(但：刷新的时间可以调整)
    function createImg() {
    
      //定时器中的函数拿到了定时器的外面，以免在定时器中的代码过多；

      var oImg = document.createElement('img'); //动态创建一个 img 元素，以备后面的操作；
      oImg.src = 'star.png'; //星星图片地址；
      document.body.appendChild(oImg); //将动态创建的 img 元素，添加到 body 的最后面；

      var num = rand(10,30);  //该语句调用函数后，可获得 [10,30] 中的任意整数值； 

      oImg.width = oImg.height = num; //设置图片的宽度与高度，和随机获得值保持一致；(即：图片是一个正方形)；

      oImg.style.position = 'absolute';//设置图片为：绝对定位；

      var _left = rand(0,window.innerWidth - num);//获取图片绝对定位后的页面随机的宽度值和高度值；
      var _top = rand(0,window.innerHeight - num);

      oImg.style.left = _left + 'px'; //设置图片绝对定位的距离左侧的距离值；
      oImg.style.top = _top + 'px';   //设置图片绝对定位的距离上侧的距离值；

      oImg.onclick = function() {
    
      //绑定单击事件，在点击任一个 '小星星' 图片后，该图片就会自杀式删除；
        this.remove();
      }
    }
  </script>
</body>
</html>

3、结果展示：
A、刚打开后的背景色及少于的星星图片：
在这里插入图片描述
B、经过一段时间后的图片显示(或者：也可以通过调整设置定时器的时间来快速将星星图片显示)：

C、在星星图片显示的过程中，仅删除中间的位置，其显示结果为 (即: 只有中间是空的其余都是满的)： 在这里插入图片描述

4、可能存在的问题：
A 、如果自己也加载了图片信息，仍然不能显示该结果，可以直接下载我传上去的文档(可能解释的更详细)，可以直接在 VScode 等其他软件上加载运行；

地址为：

https://blog.csdn.net/weixin_43405300/article/details/117903286?spm=1001.2014.3001.5502

Ⅲ、小结：

哪里有不对或不合适的地方，还请大佬们多多指点和交流！

https://blog.csdn.net/weixin_43405300/article/details/117903286?spm=1001.2014.3001.5502