【JavaScript】日期对象、节点操作、M端事件、JS插件-优快云博客

方法	作用	说明
getFullYear()	获得年份	获取四位年份
getMonth()	获得月份	取值为 0 ~ 11
getDate()	获取月份中的每一天	不同月份取值也不相同
getDay()	获取星期	取值为 0 ~ 6
getHours()	获取小时	取值为 0 ~ 23
getMinutes()	获取分钟	取值为 0 ~ 59
getSeconds()	获取秒	取值为 0 ~ 59

案例页面显示时间

需求：将当前时间以：YYYY-MM-DD HH:mm 形式显示在页面 2008-08-08 08:08

案例

分析：

①：调用日期对象方法进行转换

②：记得数字要补0

③：字符串拼接后，通过 innerText 给标签

2.3 时间戳

目标：能够获得当前时间戳

使用场景： 如果计算倒计时效果，前面方法无法直接计算，需要借助于时间戳完成

什么是时间戳:

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

算法：

将来的时间戳 - 现在的时间戳 = 剩余时间毫秒数

剩余时间毫秒数转换为剩余时间的年月日时分秒就是倒计时时间

比如将来时间戳 2000ms - 现在时间戳 1000ms = 1000ms

1000ms 转换为就是 0小时0分1秒

三种方式获取时间戳：

重点记住 +new Date() 因为可以返回当前时间戳或者指定的时间戳

案例毕业倒计时效果

需求：计算到下课还有多少时间

分析：

①：用将来时间减去现在时间就是剩余的时间

②：核心：使用将来的时间戳减去现在的时间戳

③：把剩余的时间转换为天时分秒

注意：

1. 通过时间戳得到是毫秒，需要转换为秒在计算

2. 转换公式：

Ø d = parseInt(总秒数/ 60/60 /24); // 计算天数

Ø h = parseInt(总秒数/ 60/60 %24) // 计算小时

Ø m = parseInt(总秒数 /60 %60 ); // 计算分数

Ø s = parseInt(总秒数%60); // 计算当前秒数

纯手敲代码，建议自己现根据图片进行编写在比较：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .w {
      margin: 0 atuo;
      text-align: center;
    }

    p,
    h2 {
      color: white;
    }

    span {
      display: inline-block;
      color: white;
    }


    .max_box {
      position: relative;
      padding: 20px 20px;
      width: 200px;
      height: 249px;
      background-color: red;
    }

    .min_box {
      display: inline-block;
      width: 30px;
      height: 30px;
      background-color: #000;
      color: white;
      line-height: 30px;
      text-align: center;
    }

    .last_box {
      margin-top: 90px;
    }
  </style>
</head>

<body>
  <div class="max_box">
    <p class="w">今天是2222年2月22日</p>
    <h2 class="w">下班倒计时</h2>
    <div class="mid_box w">
      <span class="min_box one">23</span>
      <span>:</span>
      <span class="min_box two">30</span>
      <span>:</span>
      <span class="min_box three">28</span>
    </div>

    <div class="last_box w">
      <span class="_min_box">23</span>
      <span>:</span>
      <span class="_min_box">30</span>
      <span>:</span>
      <span class="_min_box">00</span>
    </div>
  </div>

  <script>
    let arrColor = ['red', 'skyblue', 'pink', 'black']
    // 页面刷新随机获得一个背景色
    const countdown = document.querySelector('.max_box')
    //获得随机数
    const rand = Math.floor(Math.random() * (arrColor.length))
    countdown.style.backgroundColor = arrColor[rand]

    // 函数封装
    function getCountTime() {
      //获取当前时间，时间戳 date.now()
      const date = new Date()
      //修改下班时间
      const date1 = new Date('2025-2-8 23:30:00')
      //相减 date.now(2025-2-6 23:30:00)
      const residue = (+date1 - Date.now()) / 1000
      let d = Math.floor(residue / 60 / 60 / 24)
      let h = Math.floor(residue / 60 / 60 % 24)
      let m = Math.floor(residue / 60 % 60)
      let s = Math.floor(residue % 60)

      h = h < 10 ? '0' + h : h
      m = m < 10 ? '0' + m : m
      s = s < 10 ? '0' + s : s

      const p = document.querySelector('p')
      p.innerHTML = `今天是${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`
      const one = document.querySelector('.one')
      const two = document.querySelector('.two')
      const three = document.querySelector('.three')
      one.innerHTML = h
      two.innerHTML = m
      three.innerHTML = s
    }

    getCountTime()

    setInterval(function () {
      getCountTime()
    }, 1000)

  </script>
</body>

</html>

2.节点操作

2.1 DOM节点

1. 什么是DOM 节点？

DOM树里每一个内容都称之为节点

2. DOM节点的分类？

元素节点比如 div标签

属性节点比如 class属性

文本节点比如标签里面的文字

3. 我们重点记住那个节点？

元素节点

可以更好的让我们理清标签元素之间的关系

2.2 查找节点

目标：能够具备根据节点关系查找目标节点的能力

关闭二维码案例：

点击关闭按钮，关闭的是二维码的盒子，还要获取erweima盒子

思考：

关闭按钮和 erweima 是什么关系呢？

父子关系

所以，我们完全可以这样做：

点击关闭按钮，直接关闭它的爸爸，就无需获取erweima元素了

节点关系：针对的找亲戚返回的都是对象

父节点

子节点

兄弟节点

父节点查找：

parentNode 属性

返回最近一级的父节点找不到返回为null

子节点查找：

childNodes

获得所有子节点、包括文本节点（空格、换行）、注释节点等

children 属性（重点）

仅获得所有元素节点

返回的还是一个伪数组

兄弟关系查找：

1. 下一个兄弟节点

nextElementSibling 属性

2. 上一个兄弟节点

previousElementSibling 属性

2.3 增加节点

1.创建节点

即创造出一个新的网页元素，再添加到网页内，一般先创建节点，然后插入节点

创建元素节点方法：

2.追加节点

要想在界面看到，还得插入到某个父元素中

插入到父元素的最后一个子元素:

插入到父元素中某个子元素的前面:

案例学成在线案例渲染

分析：

①：准备好空的ul 结构

②：根据数据的个数，创建一个新的空li

③：li里面添加内容 img 标题等

④：追加给ul

重点练习：创建节点和追加节点

    const ul = document.querySelector('.box-bd ul')

    // 1. 根据数据的个数创建对应的li
    for (let i = 0; i < data.length; i++) {
      // 2. 创建li
      const li = document.createElement('li')
      // 把内容给li
      li.innerHTML = `
      <a href="#">
          <img src="${data[i].src}" alt="">
          <h4>
          ${data[i].titile}
          </h4>
          <div class="info">
            <span>高级</span> * <span>${data[i].num}</span>人在学习
          </div>
        </a>
      `
      // 3.ul 追加 li
      ul.appendChild(li)
    }

特殊情况下，我们新增节点，按照如下操作：

复制一个原有的节点

把复制的节点放入到指定的元素内部

克隆节点

cloneNode会克隆出一个跟原标签一样的元素，括号内传入布尔值

若为true，则代表克隆时会包含后代节点一起克隆

若为false，则代表克隆时不包含后代节点

默认为false

2.4 删除节点

目标：能够具备根据需求删除节点的能力

若一个节点在页面中已不需要时，可以删除它

在 JavaScript 原生DOM操作中，要删除元素必须通过父元素删除

注：

如不存在父子关系则删除不成功

删除节点和隐藏节点（display:none）有区别的：隐藏节点还是存在的，但是删除，则从html中删除节点

3. M端事件（move移动端）

目标：了解M端常见的事件

移动端也有自己独特的地方。比如触屏事件 touch （也称触摸事件），Android 和 IOS 都有。

触屏事件 touch （也称触摸事件），Android 和 IOS 都有。

touch 对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触摸笔。触屏事件可响应用户手指（或触控笔）对屏幕或者触控板操作。

常见的触屏事件如下：

触屏touch事件	说明
touchstart	手指触摸到一个DOM元素时触发
touchmove	手指在一个DOM元素上滑动时触发
touchend	手指从一个DOM元素上移开时触发

4.插件

插件: 就是别人写好的一些代码,我们只需要复制对应的代码,就可以直接实现对应的效果

学习插件的基本过程

        熟悉官网,了解这个插件可以完成什么需求 https://www.swiper.com.cn/

        看在线演示,找到符合自己需求的demo https://www.swiper.com.cn/demo/index.html

        查看基本使用流程 https://www.swiper.com.cn/usage/index.html

        查看APi文档,去配置自己的插件 https://www.swiper.com.cn/api/index.html

        注意: 多个swiper同时使用的时候, 类名需要注意区分

1.下载swiper：

2.下载swiper包

3.找到package:

4.将js 和 css文件移动到本地：

5.在线演示进行挑选想要的模板：

将网页源代码完全复制到轮播框内！

设置整个盒子的大小：

将整个轮播图超出的地方都进行隐藏：

6.API文档内进行调整，寻找合适的方式：

自动切换，将当前的代码进行复制到script内：

同理其他要求可以自己寻找并且实现~

案例学生信息表案例

业务模块：

①：点击录入按钮可以录入数据

②：点击删除可以删除当前的数据

核心思路：

①：声明一个空的数组

②：点击录入，根据相关数据，生成对象，追加到数组里面

③：根据数组数据渲染页面-表格的行

④：点击删除按钮，删除的是对应数组里面的数据

⑤：再次根据数组的数据，渲染页面

css单独选择input[type="text"]

主要代码：

script:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./1.index.css">
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .w {
      margin-top: 30px;
    }

    .box {
      position: relative;
      width: 900px;
      height: 400px;
      /* background-color: pink; */
      margin: 0 auto;
      text-align: center;
    }



    input[type="text"] {
      width: 50px;
      border-radius: 5px;
      border: 1px solid skyblue;
    }

    table {
      background-color: skyblue;
      text-align: center;
      border: skyblue;
      margin: 0 auto;
      height: 30px;
    }

    .but {
      padding: 0 5px;
      background-color: skyblue;
      color: white;
      border: 1px solid #000;
      border-radius: 2px;
      cursor: pointer;
    }
  </style>
</head>

<body>
  <div class="box">
    <h2 class="w">新增学员</h2>

    <!-- 提交表单 -->
    <form class="info w" autocomplete="off">
      姓名：<input type="text" class="uname" name="uname">
      年龄：<input type="text" class="age" name="age">
      性别：<select name="gender" class="gender">
        <option value="男">男</option>
        <option value="女">女</option>
      </select>
      薪资：<input type="text" class="salary">
      就业城市：<select name="" id="" class="city">
        <option value="北京">北京</option>
        <option value="武汉">武汉</option>
        <option value="上海">上海</option>
        <option value="广东">广东</option>
      </select>
      <!-- <input type="button" value="录入" class="but"> -->
      <button class="but">录入</button>
    </form>

    <h2 class="w">就业榜</h2>
    <table class="tab w" align="center" border="1" cellpadding="20" cellspacing="0" width="530">
      <thead>
        <tr>
          <th>学号</th>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
          <th>薪资</th>
          <th>就业城市</th>
          <th>操作</th>
        </tr>
      </thead>

      <tbody>
        <!-- <tr>
          <td>1001</td>
          <td>欧阳霸天</td>
          <td>19</td>
          <td>男</td>
          <td>15000</td>
          <td>上海</td>
          <td>
            <a href="javascript:">删除</a>
          </td>
        </tr> -->
      </tbody>

    </table>
  </div>


  <script>
    const uname = document.querySelector('.uname')
    const age = document.querySelector('.age')
    const gender = document.querySelector('.gender')
    const salary = document.querySelector('.salary')
    const city = document.querySelector('.city')
    const tbody = document.querySelector('tbody')
    //获取所有的带name属性的元素
    const items = document.querySelectorAll('[name]')
    // 声明一个空数组 增加和删除都是对这个数组进行操作
    const arr = []

    // console.log(items)
    // console.log(items[0])
    // console.log(items[1].value)

    // 1.录入模板
    // 1.1 表单提交事件
    const info = document.querySelector('.info')
    info.addEventListener('submit', function (e) {
      // 阻止默认行为 不跳转
      e.preventDefault()
      // console.log(11)

      // 这里进行表单验证 如果不通过 直接进行中断 不需要进行添加数据
      // 先遍历循环
      for (let i = 0; i < items.length; i++) {
        if (items[i].value === '') {
          // console.log(items[i].value)
          return alert('输入内容不能为空')
        }
      }

      // 创建新对象
      const obj = {
        stuId: arr.length + 1,
        uname: uname.value,
        age: age.value,
        gender: gender.value,
        salary: salary.value,
        city: city.value
      }
      // console.log(obj)

      arr.push(obj)
      // console.log(obj.gender)
      // console.log(obj)
      //清空表单
      this.reset()
      //调用渲染函数
      render()
    })

    // 2. 渲染函数 因为增加和删除都需要渲染
    function render() {
      // 先清空tbody 以前的行， 把最新数组里面的数据渲染完毕
      tbody.innerHTML = ''
      //遍历arr数组
      for (let i = 0; i < arr.length; i++) {
        // 生成 tr
        const tr = document.createElement('tr')
        tr.innerHTML = `
          <td>${arr[i].stuId}</td>
          <td>${arr[i].uname}</td>
          <td>${arr[i].age}</td>
          <td>${arr[i].gender}</td>
          <td>${arr[i].salary}</td>
          <td>${arr[i].city}</td>
          <td>
            <a href="javascript:" data-id=${i}>删除</a>
          </td>
        `

        //追加元素 父元素.appenChild(子元素)
        tbody.appendChild(tr)
      }
    }

    // 3.删除操作
    // 3.1 事件委托
    tbody.addEventListener('click', function (e) {
      if (e.target.tagName === 'A') {
        // 得到当前元素的自定义属性 data-id
        // console.log(e.target.dataset.id)

        // 删除arr 数组里面的对应数据
        arr.splice(e.target.dataset.id, 1)
        // console.log(arr)
        //重新渲染一次
        render()
      }
    })


  </script>
</body>

</html>

5. 重绘和回流

1. 浏览器是如何进行界面渲染的

解析（Parser）HTML，生成DOM树(DOM Tree)

同时解析（Parser） CSS，生成样式规则 (Style Rules)

根据DOM树和样式规则，生成渲染树(Render Tree)

进行布局 Layout(回流/重排):根据生成的渲染树，得到节点的几何信息（位置，大小）

进行绘制 Painting(重绘): 根据计算和获取的信息进行整个页面的绘制

Display: 展示在页面上