js:日期对象和dom节点

日期对象

事件对象在前端开发里经常用来表示日期：

可以获取当前系统的时间

实例化

使用new关键字来实例化一个对象：

     const date = new Date()
        console.log(date);

获取当前时间

 const date = new Date('2008-8-8')
        console.log(date);

获取指定时间

写得越详细获得更详细的时间

const date = new Date('2008-8-8 08:30:00')

获取指定日期的用途一般是用在倒计时的情况

日期对象及方法

但是这种写法明显不适合普通人类使用，日期对象返回的数据我们不能直接使用，所以需要转换为实际开发中常用的格式：

上面介绍的全是方法，而方法是属于对象的，什么对象呢？当然是你实例化的日期对象！

 const date = new Date()
        console.log(date.getMonth());

现在是一月，但是getMonth显示的是0，因为月份的取值为0-11，0就表示1月；

在实际用的时候要+1

console.log(date.getMonth()+1)

天数就不一样，表示的范围是一周七天内的天数，数字显示的范围为0-6，0指的是星期天，在洋人那里把周天看作一周的第一天，所以0是周天、1是周一......以此类推，天数的日期是正确的

来自己写一个获取系统时间的函数：

<!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>
        div {
            width: 300px;
            height: 40px;
            border: 1px solid pink;
            text-align: center;
            line-height: 40px;
        }
    </style>
</head>

<body>
    <div></div>
    <script>
        const div = document.querySelector('div')
        function getMyDate() {
            const date = new Date()
            let h = date.getHours()
            let m = date.getMinutes()
            let s = date.getSeconds()
            h = h < 10 ? '0' + h : h
            m = m < 10 ? '0' + m : m
            s = s < 10 ? '0' + s : s
            return `今天是${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日${h}时${m}分${s}秒`
        }
        div.innerHTML = getMyDate()
        setInterval(function () {
            div.innerHTML = getMyDate()
        }, 1000)
    </script>
</body>

</html>

也可以使用系统自带的格式化：

 const div = document.querySelector('div')
        const date = new Date()
        div.innerHTML = date.toLocaleString()
        setInterval(function () {
            const date = new Date()
            div.innerHTML = date.toLocaleString()
        }, 1000)

一定要记得实例化

时间戳

应用场景：计算倒计时，前面的方法无法直接计算

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

相当于每个时间都是独一无二的

算法：

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

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

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

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

获取时间戳的方法有三种：

1、使用getTime()方法，可以返回指定时间的时间戳

2、简写，使用隐式转换+new Date()，可以返回指定时间的时间戳

3、使用Date.now()此方法无须实例化，但是只能得到当前时间的时间戳

倒计时案例制作：计算我开学还有多久......

<!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: brown;
      /* 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: 60px;
      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: 40px;
      height: 34px;
      border-radius: 2px;
      background-color: #303430;
    }

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

<body>
  <div class="countdown">
    <p class="next">今天是年月日</p>
    <p class="title">开学倒计时</p>
    <p class="clock">
      <span id="day">00</span>
      <i>天</i>
      <span id="hour">00</span>
      <i>时</i>
      <span id="minutes">25</span>
      <i>分</i>
      <span id="second">20</span>
      <i>秒</i>
    </p>
    <p class="tips">2月23日00:00:00开学</p>
  </div>
  <script>
    // 随机颜色函数
    // 1. 自定义一个随机颜色函数
    function getRandomColor(flag = true) {
      if (flag) {
        // 3. 如果是true 则返回 #ffffff
        let str = '#'
        let arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f']
        // 利用for循环随机抽6次 累加到 str里面
        for (let i = 1; i <= 6; i++) {
          // 每次要随机从数组里面抽取一个  
          // random 是数组的索引号 是随机的
          let random = Math.floor(Math.random() * arr.length)
          // str = str + arr[random]
          str += arr[random]
        }
        return str

      } else {
        // 4. 否则是 false 则返回 rgb(255,255,255)
        let r = Math.floor(Math.random() * 256)  // 55
        let g = Math.floor(Math.random() * 256)  // 89
        let b = Math.floor(Math.random() * 256)  // 255
        return `rgb(${r},${g},${b})`
      }

    }

    // 页面刷新随机得到颜色
    const countdown = document.querySelector('.countdown')
    countdown.style.backgroundColor = getRandomColor()
    // 函数封装 getCountTime
    function getCountTime() {
      const last = +new Date('2025-2-23 00:00:00')
      const now = +new Date()
      console.log(now, last);
      const count = parseInt(last - now) / 1000
      let d = parseInt(count / 60 / 60 / 24); // 计算天数
      let h = parseInt(count / 60 / 60 % 24) // 计算小时
      let m = parseInt(count / 60 % 60); // 计算分数
      let s = parseInt(count % 60); // 计算当前秒数
      h = h < 10 ? '0' + h : h
      m = m < 10 ? '0' + m : m
      s = s < 10 ? '0' + s : s
      console.log(h, m, s)
      const nowTime = new Date()
      const year = nowTime.getFullYear()
      const month = nowTime.getMonth() + 1
      const date = nowTime.getDate()

      //  5. 把时分秒写到对应的盒子里面
      document.querySelector('#day').innerHTML = d
      document.querySelector('#hour').innerHTML = h
      document.querySelector('#minutes').innerHTML = m
      document.querySelector('#second').innerHTML = s
      document.querySelector('.next').innerHTML = `今天是${year}年${month}月${date}日`
    }
    // 先调用一次
    getCountTime()

    // 开启定时器
    setInterval(getCountTime, 1000)
  </script>
</body>

</html>

节点操作

节点简介

学过树的孩子们都知道，树是有一个个节点的，dom树也是如此

元素节点：比较重要，在后期在增删改查里，主要指的是元素节点，也就是所有的标签

比如body、 div，html 是根节点

属性节点：所有的属性，比如a标签的href

文本节点：所有的文本

其他......

节点的增删改查

这里的增删改查是根据节点之间的关系进行增删改查，比如html是head的父节点，在已知head标签的时候就可以通过父子关系查找到html标签

查找结点

eg:

节点关系分为三种：父节点、子节点、兄弟节点

父节点

访问最近一级父节点：parentNode 属性

 const baby=document.querySelector('.baby')
       console.log(baby)//返回dom对象
       console.log(baby.parentNode)//返回的也是dom对象

如果想获取爷节点：

      console.log(baby.parentNode.parentNode)//返回的是爷爷

（爸爸的爸爸叫爷爷）

对于点击关闭按钮就可以关闭广告的这个功能来说，外面就可以不用再单独获取父节点的对象了

原来的代码：

学会查找父节点以后：

子节点

childNodes属性获取子节点

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

children 属性（重点）

仅获得所有元素节点

返回的还是一个伪数组

展开可以查看详细信息：

在选择的时候其实只选择了直系亲儿子，但是亲儿子里的内容也一并被拿过来了

对简化代码很有帮助

兄弟节点

下一个兄弟节点 nextElementSibling 属性

先前一个兄弟节点 previousElementSibling 属性

const baby1=document.querySelector('.baby1')
        console.log(baby1.previousElementSibling)
        console.log(baby1.nextElementSibling)

以此类推也可以拿到下下一个节点，做某些上一页、下一页的时候会用到

同样，返回的都是对象

增加结点

dom树里本来没有，但是通过js添加的节点,适合临时启用的dom对象

eg:

创建节点

创建节点只代表创建出来了，真正想在界面里看到还得插入到某个父元素里，需要

追加节点

（头插法尾插法(?

例如在ul下面的li里再添加一个li：创建一个li->选择ul->在ul的前面/后面添加进去

注意在获取节点的时候，children永远是以伪数组呈现的，所以可以用下标【0】来确定插在最前面；如果伪数组为空也不会报错，直接插入

其实就是用js来写标签

<!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>
    <link rel="stylesheet" href="./css/style.css">
    <style>

    </style>
</head>

<body>

    <!-- 4. box核心内容区域开始 -->
    <div class="box w">
        <div class="box-hd">
            <h3>精品推荐</h3>
            <a href="#">查看全部</a>
        </div>
        <div class="box-bd">
            <ul class="clearfix">
            </ul>
        </div>
    </div>
    <script>
        // 1. 重构  
        let data = [
            {
                src: 'images/course01.png',
                title: 'Think PHP 5.0 博客系统实战项目演练',
                num: 1125
            },
            {
                src: 'images/course02.png',
                title: 'Android 网络动态图片加载实战',
                num: 357
            },
            {
                src: 'images/course03.png',
                title: 'Angular2 大前端商城实战项目演练',
                num: 22250
            },
            {
                src: 'images/course04.png',
                title: 'Android APP 实战项目演练',
                num: 389
            },
            {
                src: 'images/course05.png',
                title: 'UGUI 源码深度分析案例',
                num: 124
            },
            {
                src: 'images/course06.png',
                title: 'Kami2首页界面切换效果实战演练',
                num: 432
            },
            {
                src: 'images/course07.png',
                title: 'UNITY 从入门到精通实战案例',
                num: 888
            },
            {
                src: 'images/course08.png',
                title: 'Cocos 深度学习你不会错过的实战',
                num: 590
            },
        ]
        const ul = document.querySelector('.box-bd ul')
        for (let i = 0; i <data.length; i++) {
            const li = document.createElement('li')
            li.innerHTML = `
        <a href="#">
            <img src="${data[i].src}" alt="">
            <h4>${data[i].title}
            </h4>
            <div class="info">
                <span>高级</span>·
                <span>${data[i].num}</span>人在学
            </div>
                </a>
        `
            ul.appendChild(li)
        }
    </script>
</body>

</html>

克隆节点

做轮播图这种有一定重复性的效果时，里面相似的标签也可以直接复制(克隆)先前的：

（复制已经有的li）

(进行追加)

在JavaScript中，Node.cloneNode()方法用于克隆一个节点。克隆可以是浅克隆（只复制节点本身，不包括其子节点，也就是只复制标签本身）或者是深克隆（复制节点及其所有后代节点）。默认情况下，该方法执行的是浅克隆。

删除结点

要删除一个结点必须经过父节点的同意

 const dad=document.querySelector('.dad')
        console.log(dad.children[0]);
        dad.removeChild(dad.children[0])

（删除前后）

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

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

M端事件

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

简单了解：

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

常见的触屏事件如下：

点击这个按键可以切换为移动端

js插件

使用一些别人做好的成片（前端cv工程师）

学习插件的基本过程

Ø 熟悉官网,了解这个插件可以完成什么需求 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同时使用的时候, 类名需要注意区分

rz你怎么了！