同步和异步以及对DOM的操作

最新推荐文章于 2023-10-25 00:38:19 发布

BloggerM

最新推荐文章于 2023-10-25 00:38:19 发布

阅读量657

点赞数

分类专栏： HTML DOM 事件文章标签： javascript html 前端

本文链接：https://blog.csdn.net/HTML_Z/article/details/123599574

版权

HTML DOM 事件专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1. 同步和异步

  <script>
    // 同步：当上一次任务完成之后 才继续完成下面的任务
    console.log("123");
    console.log("456");
    console.log("789");
    // 异步：多次任务，同时进行
  </script>

2. 定时器

2.1 setTimeout()

setTimeout() 是属于 window 的方法，该方法用于在指定的毫秒数后调用函数或计算表达式。

  <script>
    // setTimeout 经过指定时间执行function中的代码
    // 第一个参数是回调函数
    // 第二个参数是一个毫秒数
    setTimeout(function () {
      // 5秒钟之后执行该代码
      console.log(123);
    }, 5000);
  </script>

2.2 setInterval()

setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。

  <script>
    // setInterval 每隔一段时间执行某个操作
    setInterval(function () {
      // 每隔2秒钟执行一次该代码
      console.log(123);
    }, 2000);
  </script>

2.3 clearInterval()

显示当前时间 ( setInterval() 函数会每秒执行一次函数，类似手表)。使用 clearInterval() 来停止执行。

  <script>
    // 清除计时器
    var i = 0;
    var timer = setInterval(function () {
      i++;
      console.log(i);
      if (i >= 10) {
        // 清除计时器
        clearInterval(timer);
      }
    }, 2000);
  </script>

3. 通过 JS 创建元素

  <script>
    // 创建img
    var img = document.createElement("img");
    img.src = "./img/1.jpg";

    // 给创建的元素添加属性
    // 相当于 <img id="image" />
    img.setAttribute("id", "image");

    // 相当于 <img class="a" />
    // img.setAttribute('class','a')
    // 只有该元素固有的属性 才可以进行属性添加 其他的只能使用setAttribute
    img.className = "a";

    // 将img放到body中
    document.body.appendChild(img);

    // 创建文本节点
    var text = document.createTextNode("hello world");
    document.body.appendChild(text);
  </script>

4. 将创建的元素放在容器中

<!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>
      #box {
        width: 500px;
        height: 500px;
        border: 1px solid #ff0000;
      }
    </style>
  </head>
  <body>
    <div id="box"></div>
  </body>
  <script>
    var box = document.getElementById("box");
    for (var i = 0; i < 10; i++) {
      var p = document.createElement("p");
      var text = document.createTextNode("hello world");
      p.appendChild(text);
      box.appendChild(p);
    }
  </script>
</html>