网页内容由节点(node)组成元素节点, 属性节点, 文本节点, 注释

dom 节点操作语法重点元素节点

dom节点的查增克隆删

查找子节点父元素.children

查找兄弟节点 上一个兄弟同级的元素.previousElementSibling 下

一个兄弟同级的元素.nextElementSibling

查找父节点 父元素.parentNode

新增节点 document.createElement

用法

创建一个空标签 document.createElement('标签名')
设置内容元素.innerText或者元素.innerHTML
添加到页面dom 父元素.appendChild(子元素)

新增到最后面与新增到指定位置

新增到最后面：父元素.appendChild(元素)
新增到元素前面 : 父元素.insertBefore(要新增的元素,哪一个元素前面)

克隆节点 元素.cloneNode(true)

默认false : 浅克隆，只克隆元素自身

true : 深克隆，克隆元素自身 + 所有后代元素

删除节点 父元素.removeChild(子元素)

定时器一段代码间隔时间重复执行

定时器语法 ( 回掉函数,)

**如果一个函数的参数是函数,这个参数函数叫回调函数

另外一个是 ( number )类型,间隔时间单位毫秒ms 1s =1000ms

永久定时器 setInterval 一旦开启永久重复执行,只能手动

开启 let timeID = setInterval(function () {}, 间隔时间)
清除 clearInterval ( timeID )

一次定时器 setTimeout()

开启 let timeID = setTimeout(function () {},间隔时间)
清除 clearTimeout(timeID )

<!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>Document</title>
  <style>
    span {
      display: inline-block;
      width: 50px;
      height: 50px;
      background-color: black;
      text-align: center;
      line-height: 50px;
      color: #fff;
      font-size: 25px;
      font-weight: 700;
    }
  </style>
</head>

<body>
  <div>
    <span id="hour">01</span> : <span id="minute">02</span> :
    <span id="second">15</span>
  </div>
</body>
<script>
  /* 1 页面一加载,开启间隔时间为1s的 永久定时器
       1.1 获取当时的span标签文本 (转number)
       1.2 s--
       1.3 当s < 0 时 m =59 m--
       1.4 当m < 0 时 h=59 h--
       1.5 当h m s <10 则需补0
       1.6 将计算后的结果重新赋值给span标签

       1.7 当h==0 && m == 0 && s==0就清楚定时器      
    */

  let timeID = setInterval(function () {
    let h = +document.querySelector('#hour').innerText
    let m = +document.querySelector('#minute').innerText
    let s = +document.querySelector('#second').innerText
    s--
    if (s < 0) {
      s = 59
      m--
    }
    if (m < 0) {
      m = 59
      h--
    }
     h = h < 10 ? '0' + h : h
     m = m < 10 ? '0' + m : m
     s = s < 10 ? '0' + s : s
    document.querySelector('#hour').innerText = h
    document.querySelector('#minute').innerText = m
    document.querySelector('#second').innerText = s
    if (h == 0 && m == 0 && s == 0) {
      clearInterval(timeID)
    }

  }, 1000)
  //总结 : h = h < 10 ? '0' + h : h  不需要加let
</script>

</html>

节点 及 倒计时你会写吗

定时器 一段代码 间隔时间 重复执行

节点及倒计时你会写吗

定时器一段代码间隔时间重复执行