3. DOM 节点操作（2）- 时间对象、消息发布实例、重绘和回流

J_Tiffany
63 阅读3分钟

时间对象

时间对象 就是用来表示时间的对象，它可以获得当前系统时间

1. 实例化

new 这个关键字在代码中一般表示 实例化 某个对象

创建一个时间对象，并获取时间：

实例1：获取当前时间

  <body>
    <script>
      let date = new Date()
      console.log(date)
    </script>
  </body>

image.png

示例2：获取指定时间

  <body>
    <script>
      let date = new Date('2000/8/3 9:25')
      console.log(date)
    </script>
  </body>

image.png

2. 时间对象方法

image.png

  <body>
    <script>
      let date = new Date()
      console.log(date)

      console.log(date.getFullYear())
      console.log(date.getMonth() + 1)
      console.log(date.getDate())
      console.log(date.getDay())

      console.log(date.getHours())
      console.log(date.getMinutes())
      console.log(date.getSeconds())
    </script>
  </body>

image.png

  <body>
    <div></div>

    <script>
      let arrWen = ['星期日','星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
      let div = document.querySelector('div')

      function getDate() {
        let date = new Date()

        let year = date.getFullYear()
        let mon = date.getMonth() + 1
        let day = date.getDate()
        let wen = date.getDay()

        let h = date.getHours()
        let m = date.getMinutes()
        let s = date.getSeconds()

        div.innerHTML = `今天是：${year}年${mon}月${day}日 ${arrWen[wen]} &nbsp;&nbsp;&nbsp;${h}：${m}：${s}`
      }

      getDate() // 开始就调用，不会出现一秒钟空白区
      setInterval(getDate, 1000)
    </script>
  </body>

image.png

3. 时间戳

时间戳 是指 1970年01月01日00时00分00秒 起到现在的 毫秒数 ，它是一种特殊的计量时间的方式

获取时间戳有三种方式：

  • 使用 getTime() 方法
  • 简写 +new Date()
  • 使用 Date.now() ，无需实例化，但是只能得到当前的时间戳，前面两种可以返回指定时间的时间戳
    <script>
      // 1.使用 getTime() 方法
      let date = new Date()
      console.log(date.getTime())

      // 2.+new Date()
      console.log(+new Date())

      // 3.Date.now()
      console.log(Date.now())
    </script>

image.png

示例：下班倒计时

image.png

分析：

  • 用将来时间减去现在时间就是剩余的时间；
  • 核心是利用将来的时间戳减去现在的时间戳；
  • 把剩余的时间转换为对应的格式

通过时间戳得到的是毫秒数，需要转为秒再计算：

  • 计算天数：parseInt(总秒数/60/60/24)
  • 计算小时：parseInt(总秒数/60/60%24)
  • 计算分钟：parseInt(总秒数/60%60)
  • 计算秒数：parseInt(总秒数%60)
<!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>
      .countdown {
        width: 240px;
        height: 305px;
        text-align: center;
        line-height: 1;
        color: #fff;
        background-color: pink;
        /* background-size: 240px; */
        /* float: left; */
        overflow: hidden;
      }

      .countdown .next {
        font-size: 16px;
        margin: 25px 0 14px;
      }

      .countdown .title {
        font-size: 33px;
      }

      .countdown .tips {
        margin-top: 80px;
        font-size: 23px;
      }

      .countdown small {
        font-size: 17px;
      }

      .countdown .clock {
        width: 142px;
        margin: 18px auto 0;
        overflow: hidden;
      }

      .countdown .clock span,
      .countdown .clock i {
        display: block;
        text-align: center;
        line-height: 34px;
        font-size: 23px;
        float: left;
      }

      .countdown .clock span {
        width: 34px;
        height: 34px;
        border-radius: 2px;
        background-color: skyblue;
      }

      .countdown .clock i {
        width: 20px;
        font-style: normal;
      }
    </style>
  </head>

  <body>
    <div class="countdown">
      <p class="next">今天是2021年8月28日</p>
      <p class="title">下班倒计时</p>
      <p class="clock">
        <span id="hour">00</span>
        <i>:</i>
        <span id="minutes">25</span>
        <i>:</i>
        <span id="scond">20</span>
      </p>
      <p class="tips">现在是18:30:00</p>
    </div>

    <script>
      let next = document.querySelector('.next') // 获取元素
      let tips = document.querySelector('.tips')
      let hour = document.querySelector('#hour')
      let minutes = document.querySelector('#minutes')
      let scond = document.querySelector('#scond')

      getDateTime()
      setInterval(getDateTime, 1000)

      function getDateTime() {
        let date = new Date()
        let year = date.getFullYear()
        let mon = date.getMonth() + 1
        let day = date.getDate()
        next.innerHTML = `今天是${year}年${mon}月${day}日`

        let h = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
        let min = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
        let sec = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
        tips.innerHTML = `现在是 ${h}:${min}:${sec}`

        // 得到指定时间戳
        let line = +new Date('2024/7/9 12:00:00')
        // 获取当前时间戳
        let now = +date
        // 计算剩余的时间戳 / 1000 = 剩余秒数
        let diff = (line - now) / 1000
        hour.innerHTML = parseInt((diff / 60 / 60) % 24) < 10 ? '0' + parseInt((diff / 60 / 60) % 24) : parseInt((diff / 60 / 60) % 24)
        minutes.innerHTML = parseInt((diff / 60) % 60) < 10 ? '0' + parseInt((diff / 60) % 60) : parseInt((diff / 60) % 60)
        scond.innerHTML = parseInt(diff % 60) < 10 ? '0' + parseInt(diff % 60) : parseInt(diff % 60)
      }
    </script>
  </body>
</html>

综合实例 - 消息发布

image.png

需求1：注册 input 事件

监听输入框的 input 事件，将文本的内容长度赋值给对应的数值，表单的最大长度 maxlength 属性可以直接限制在 200 个数之间，主要代码如下：

image.png

<script>
      let area = document.querySelector('#area')
      let useCount = document.querySelector('#useCount')

      // 监听输入事件，记录输入字符的长度
      area.addEventListener('input', () => {
        useCount.innerHTML = area.value.length
      })
</script>

image.png

需求2：发送的内容不能为空

点击发布按钮之后，判断如果内容为空则提示输入不能为空，为了防止输入没有意义的空格，需要去掉首尾的空格，并将表单的值设置为空字符串，同时发布内容的长度也要重置为0

 <script>
      let send = document.querySelector('#send')
      let area = document.querySelector('#area')
      let useCount = document.querySelector('#useCount')


      // 监听发布事件
      send.addEventListener('click', () => {
        // 发布内容不能为空
        if (!area.value.trim().length) {
          area.value = ''
          useCount.innerHTML = 0
          return alert('内容不能为空')
        }
      })
 </script>

image.png

需求3：发布留言 - 要在发布的事件监听内写

  • 如果发布的内容不为空时，创建一个 li ，然后通过 innerHTML 追加数据

  • 随机选取数组里面给定的模拟数据，替换模板的图片和其他内容

  • 利用时间对象将时间动态化，toLocaleString() 用法参考 JS - toLocaleString() 方法_js tolocalestring-CSDN博客

  • 然后将 li 里面的内容追加给 ul

  • 最后清空文本和留言长度

<script>
      // 监听发布事件
      send.addEventListener('click', () => {
        // 发布内容不能为空
        if (!area.value.trim().length) {
          area.value = ''
          useCount.innerHTML = 0
          return alert('内容不能为空')
        }

        // 发布内容不为空
        // 随机数，用以随机选取发布人、用户名信息
        function getRandom(min, max) {
          return Math.floor(Math.random() * (max - min + 1)) + min
        }
        let randomInfo = getRandom(0, dataArr.length - 1)

        // 创建发布内容
        let li = document.createElement('li')
        li.innerHTML = `
            <div class="info">
              <img class="userpic" src=${dataArr[randomInfo].imgSrc} />
              <span class="username">${dataArr[randomInfo].uname}</span>
              <p class="send-time">发布于 ${new Date().toLocaleString()}</p>
            </div>
            <div class="content">${area.value}</div>
            <span class="the_del">X</span>
        `
        // console.log(new Date().toLocaleString()) //将时间动态化

        // 清空表单内容，同时将长度置为0
        // console.log(list.children)
        list.insertBefore(li, list.children[0])
        area.value = ''
        useCount.innerHTML = 0
      })
</script>

image.png

需求4：删除发布的留言 - 放在追加节点的前面

易错点：删除按钮的点击事件要在发布的事件里面获取，外面获取不到

把删除按钮的点击事件放到追加进 ul 的前面注册，这样在创建 li 元素的同时就绑定了事件

image.png

消息发布完整代码

<!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;
      }

      ul {
        list-style: none;
      }

      .w {
        width: 900px;
        margin: 0 auto;
      }

      .controls textarea {
        width: 878px;
        height: 100px;
        resize: none;
        border-radius: 10px;
        outline: none;
        padding-left: 20px;
        padding-top: 10px;
        font-size: 18px;
      }

      .controls {
        overflow: hidden;
      }

      .controls div {
        float: right;
      }

      .controls div span {
        color: #666;
      }

      .controls div .useCount {
        color: red;
      }

      .controls div button {
        width: 100px;
        outline: none;
        border: none;
        background: rgb(0, 132, 255);
        height: 30px;
        cursor: pointer;
        color: #fff;
        font: bold 14px '宋体';
        transition: all 0.5s;
      }

      .controls div button:hover {
        background: rgb(0, 225, 255);
      }

      .controls div button:disabled {
        background: rgba(0, 225, 255, 0.5);
      }

      .contentList {
        margin-top: 50px;
      }

      .contentList li {
        padding: 20px 0;
        border-bottom: 1px dashed #ccc;
        position: relative;
      }

      .contentList li .info {
        position: relative;
      }

      .contentList li .info span {
        position: absolute;
        top: 15px;
        left: 100px;
        font: bold 16px '宋体';
      }

      .contentList li .info p {
        position: absolute;
        top: 40px;
        left: 100px;
        color: #aaa;
        font-size: 12px;
      }

      .contentList img {
        width: 80px;
        border-radius: 50%;
      }

      .contentList li .content {
        padding-left: 100px;
        color: #666;
        word-break: break-all;
      }

      .contentList li .the_del {
        position: absolute;
        right: 0;
        top: 0;
        font-size: 28px;
        cursor: pointer;
      }
    </style>
  </head>

  <body>
    <div class="w">
      <!-- 操作的界面 -->
      <div class="controls">
        <img src="./images/9.6/tip.png" alt="" /><br />
        <!-- maxlength 可以用来限制表单输入的内容长度 -->
        <textarea placeholder="说点什么吧..." id="area" cols="30" rows="10" maxlength="200"></textarea>
        <div>
          <span class="useCount" id="useCount">0</span>
          <span>/</span>
          <span>200</span>
          <button id="send">发布</button>
        </div>
      </div>
      <!-- 微博内容列表 -->
      <div class="contentList">
        <ul id="list"></ul>
      </div>
    </div>

    <!-- 添加了hidden属性元素会直接隐藏掉 -->
    <li hidden>
      <div class="info">
        <img class="userpic" src="./images/9.6/03.jpg" />
        <span class="username">死数据:百里守约</span>
        <p class="send-time">死数据:发布于 2020年12月05日 00:07:54</p>
      </div>
      <div class="content">死数据:111</div>
      <span class="the_del">X</span>
    </li>

    <script>
      // maxlength 是一个表单属性, 作用是给表单设置一个最大长度

      // 模拟数据
      let dataArr = [
        { uname: '司马懿', imgSrc: './images/9.5/01.jpg' },
        { uname: '女娲', imgSrc: './images/9.5/02.jpg' },
        { uname: '百里守约', imgSrc: './images/9.5/03.jpg' },
        { uname: '亚瑟', imgSrc: './images/9.5/04.jpg' },
        { uname: '虞姬', imgSrc: './images/9.5/05.jpg' },
        { uname: '张良', imgSrc: './images/9.5/06.jpg' },
        { uname: '安其拉', imgSrc: './images/9.5/07.jpg' },
        { uname: '李白', imgSrc: './images/9.5/08.jpg' },
        { uname: '阿珂', imgSrc: './images/9.5/09.jpg' },
        { uname: '墨子', imgSrc: './images/9.5/10.jpg' },
        { uname: '鲁班', imgSrc: './images/9.5/11.jpg' },
        { uname: '嬴政', imgSrc: './images/9.5/12.jpg' },
        { uname: '孙膑', imgSrc: './images/9.5/13.jpg' },
        { uname: '周瑜', imgSrc: './images/9.5/14.jpg' },
        { uname: '老夫子', imgSrc: './images/9.5/15.jpg' },
        { uname: '狄仁杰', imgSrc: './images/9.5/16.jpg' },
        { uname: '扁鹊', imgSrc: './images/9.5/17.jpg' },
        { uname: '马可波罗', imgSrc: './images/9.5/18.jpg' },
        { uname: '露娜', imgSrc: './images/9.5/19.jpg' },
        { uname: '孙悟空', imgSrc: './images/9.5/20.jpg' },
        { uname: '黄忠', imgSrc: './images/9.5/21.jpg' },
        { uname: '百里玄策', imgSrc: './images/9.5/22.jpg' }
      ]
      // 需求1：检测用户输入字数
      //   1. 注册input事件
      //   2. 将文本的内容的长度赋值给对应的数值
      //   3. 表单的maxlength属性可以直接限制在200个数之间
      let textarea = document.querySelector('textarea')
      let useCount = document.querySelector('.useCount')
      // 发布按钮
      let send = document.querySelector('#send')
      // ul
      let ul = document.querySelector('#list')
      textarea.addEventListener('input', function () {
        // console.log(this.value.length)
        useCount.innerHTML = this.value.length
      })

      // 需求2： 输入不能为空
      //   点击button之后判断
      //   判断如果内容为空，则提示不能输入为空, 并且直接return 不能为空
      //   防止输入无意义空格, 使用字符串.trim()去掉首尾空格
      // console.log('  str')
      // console.log('  str '.trim())
      //   并将表单的value值设置为空字符串
      //   同时下面红色为设置为0
      send.addEventListener('click', function () {
        if (textarea.value.trim() === '') {
          //   并将表单的value值设置为空字符串
          textarea.value = ''
          //   同时下面红色为设置为0
          useCount.innerHTML = 0
          return alert('内容不能为空')
        }

        // 随机数
        function getRandom(min, max) {
          return Math.floor(Math.random() * (max - min + 1)) + min
        }
        let random = getRandom(0, dataArr.length - 1)
        // 需求3：   新增留言  写到send 的里面
        // 创建一个小li，然后里面通过innerHTML追加数据
        let li = document.createElement('li')
        // 随机获取数据数组里面的内容, 替换newNode的图片和名字以及留言内容
        li.innerHTML = `
       <div class="info">
      <img class="userpic" src=${dataArr[random].imgSrc}>
      <span class="username">${dataArr[random].uname}</span>
      <p class="send-time"> ${new Date().toLocaleString()} </p>
      </div>
      <div class="content">${textarea.value}</div>
      <span class="the_del">X</span>
      `

        // 需求4：删除留言 放到追加的前面
        // 在事件处理函数里面获取点击按钮, 注册点击事件
        //   (易错点: 必须在点击事件里面获取, 外面获取不到)
        // 删除对应的元素(通过this获取对应的那条需要删除的元素)
        // 教你一招: 放到追加进ul的前面，这样创建元素的同时顺便绑定了事件
        // 使用 li.querySelector()  --- 从 li 里面找，从文档中找不到
        let the_del = li.querySelector('.the_del')
        the_del.addEventListener('click', function () {
          // 删除操作 点击的是X  删除的小li  父元素.removeChild(子元素)
          ul.removeChild(li)
        })

        // 利用时间对象将时间动态化       new Date().toLocaleString()
        // 追加给 ul  用  父元素.insertBefore(子元素, 那个元素的前面)
        ul.insertBefore(li, ul.children[0])
        // 需求5：重置
        // 将表单域内容重置为空
        // 将userCount里面的内容重置为0 同时下面红色为设置为0
        textarea.value = ''
        useCount.innerHTML = 0
      })
    </script>
  </body>
</html>

重绘和回流

浏览器渲染界面：

image.png

  • 解析 HTML ，生成 DOM 树；
  • 同时解析（parser）CSS 样式，生成样式规则；
  • 根据 DOM 树和样式规则，生成渲染树（render tree）；
  • 根据生成的渲染树，得到节点的几何信息（位置、大小），再进行布局（layout 回流/重排）；
  • 根据根据计算和获取的信息进行整个页面的绘制（painting 重绘）；
  • 最后展示在页面上（display）

回流（重排） ：当渲染树中部分或全部元素的尺寸、结构、布局等发生改变时，浏览器就会重新渲染部分或全部文档的过程

重绘 ：由于元素样式的改变并不会影响它在文档流中的位置和文档的布局时（如：color、outline 等），称为重绘

重绘不一定引起回流，但回流一定会引起重绘，简单来说，如果影响到了布局就会有回流

会导致回流/重排的操作 ：

  • 页面首次刷新
  • 浏览器窗口的大小发生改变
  • 元素的大小或位置发生改变
  • 改变字体的大小
  • 内容发生改变，如 input 的输入、图片的大小等
  • 激活 CSS 伪类，如 hover
  • 脚本操作 DOM ，如添加或删除可见的 DOM 元素
avatar
文章
阅读
粉丝