雪花漫天飞——createDocumentFragment()方法

最新推荐文章于 2023-10-17 11:22:32 发布

ZXH0122

最新推荐文章于 2023-10-17 11:22:32 发布

阅读量154

点赞数

分类专栏：前端 javascript 文章标签： javascript

本文链接：https://blog.csdn.net/ZXH0122/article/details/108076753

版权

前端同时被 2 个专栏收录

84 篇文章 3 订阅

订阅专栏

javascript

31 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>随机碎片展示</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      body{font-size:40px;}
      p {
        display: block;
        width: 160px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        padding: 2px;
        margin: 0px;
        position: absolute;
      }
    </style>
  </head>
  <body>
    <script>
    window.onload=function(){
        setInterval("insertps()",100);
        // setInterval:定时器(每隔一秒执行一次)；setTimeout:计时器(一分钟后执行)；
    }
    function insertps(){
        var aColors = ["red", "green", "blue", "magenta", "yellow", "chocolate", "black", "aquamarine", "lime", "fuchsia", "brass", "azure", "brown", "bronze", "deeppink", "aliceblue", "gray", "copper", "coral", "feldspar", "orange", "orchid", "pink", "plum", "quartz", "purple"];
      /* createDocumentFragment()可以包含各种类型的节点，在创建之初是空的。
      继承的parentNode属性总是null */
        var ofragment=document.createDocumentFragment(); //碎片(创建文档碎片节点)
        for(var i=0;i<aColors.length;i++){
            var posx=Math.round(Math.random()*1000); //x轴范围
            var posy=Math.round(Math.random()*600); //y轴范围
            var op=document.createElement("p");
            var optext=document.createTextNode("*");
            op.appendChild(optext);//将数组中文字插入到p标签内
            op.style.left=posx + "px";//p的位置
            op.style.top=posy + "px";//p的位置
            op.style.color=aColors[i]; // p的颜色
            ofragment.appendChild(op);//将段落op插入到碎片中
        }
        document.body.appendChild(ofragment);
        // 逐个删除p
        var pnum=document.getElementsByTagName("p");
        for(var i=0;i<pnum.length;i++){
            document.body.removeChild(pnum[i]);
        }
    }
    </script>
  </body>
</html>