日期对象（时间对象方法+节点+移动端触摸事件）

你想要那颗糖

已于 2023-04-03 11:04:28 修改

阅读量188

点赞数 1

分类专栏： JavaScript 文章标签： javascript 前端 html

于 2023-03-28 12:42:13 首次发布

本文链接：https://blog.csdn.net/qq_50260510/article/details/129813295

版权

JavaScript 专栏收录该内容

63 篇文章 2 订阅

订阅专栏

本文介绍了JavaScript中的日期对象，包括如何实例化及获取当前时间。同时，讲解了时间戳的概念及其在计算倒计时中的应用。接着，探讨了DOM节点操作，如元素节点、查找节点、增加和删除节点的方法。最后，提到了移动端的触摸事件，如touchstart、touchmove和touchend。

摘要由CSDN通过智能技术生成

一、日期对象

1.日期对象：用来表示日期和时间的对象

2.作用：可以得到当前系统日期和时间

3.Date是JavaScript 内置对象

4.日期对象使用必须先实例化：创建一个日期对象并获取时间；在代码中发现了 new 关键字时，一般将这个操作称为 实例化

5.语法：

（1）const date = new Date() 获取当前时间

（2）const date = new Date('2088-08-08 08:08:56') 获取指定时间

案例展示：

<!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>获取时间</title>
  <style>
    div {
      height: 40px;
      width: 250px;
      border: 1px dashed gray;
      line-height: 40px;
      padding-left: 20px;
      color: red;
    }
  </style>
</head>
<body>
  <div></div>
  <script>
    // const d = new Date('2088-08-08 08:08:56')
    // 页面打开默认渲染一次
    const d = new Date()
    // d.toLocaleString() 年/月/日 时:分:秒
    // d.toLocaleDateString()  年/月/日
    // d.toLocaleTimeString()  时:分:秒
    document.querySelector('div').innerHTML = d.toLocaleString()
    // 每隔一秒获取最新的日期后渲染一次
    setInterval(function() {
      const d = new Date()
      document.querySelector('div').innerHTML = d.toLocaleString()
    }, 1000)
  </script>
</body>
</html>

效果展示：

6.格式化日期对象：

二、时间戳

1.什么是时间戳: 是指1970年01月01日00时00分00秒起至现在的总毫秒数(数字型)，它是一种特殊的计量时间的方式

2. 使用场景： 计算倒计时效果，需要借助于时间戳完成

3.算法：

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

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

4.三种方式获取时间戳：

案例分享：

距离自己生日的倒计时：

分析：

①：核心：使用将来的时间戳减去现在的时间戳，封装函数 getTimer

②：把剩余的时间戳转换为时、分、秒

③：把计算时分秒写到对应 span 盒子里面

④：添加定时器效果自动变化时间

注意：

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

2. 转换公式：

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

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

s = 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>自己生日的倒计时</title>
    <style>
        .countdown {
            width: 400px;
            height: 500px;
            text-align: center;
            line-height: 1;
            color: #fff;
            background-color: brown;
            /* background-size: 240px; */
            /* float: left; */
            overflow: hidden;
            margin: 100px auto;
        }

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

        .countdown .title {
            font-size: 32px;
            font-weight: 600;
        }

        .countdown .tips {
            margin-top: 100px;
            font-size: 18px;
            font-weight: 600;
        }

        .countdown .tips2 {
            margin-top: 20px;
            text-align: center;
            font-size: 16px;
        }

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

        .countdown .clock {
            width: 350px;
            margin: 50px auto 0;
            overflow: hidden;
        }

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

        .countdown .clock span {
            width: 100px;
            height: 80px;
            border-radius: 2px;
            background-color: #303430;
        }

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

<body>
    <div class="countdown">
        <p class="next">今天是2023年3月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="second">20</span>
        </p>
        <p class="tips">2023年10月14日 小淳破壳日快乐</p>
        <p class="tips2">努力经营当下，直至未来明朗，加油！</p>
    </div>

    <script>
        // 1.获取三个span
        const hour = document.querySelector('#hour')
        const minutes = document.querySelector('#minutes')
        const second = document.querySelector('#second')

        // 2.封装函数，方便下次调用
        function getTimer() {
            // 1.获取当前和未来的时间，两者相减得出差值
            const ms = +new Date('2023-10-14 00:00:00') - +new Date()
            // 2.将两者的差值转换成时分秒
            let h = parseInt(ms / 1000 / 60 / 60 )
            h = h < 10 ? '0' + h : h
            let m = parseInt(ms / 1000 / 60 % 60)
            m = m < 10 ? '0' + m : m
            let s = parseInt(ms / 1000 % 60)
            s = s < 10 ? '0' + s : s
            console.log(h , m , s);

            hour.innerHTML = h
            minutes.innerHTML = m
            second.innerHTML = s
        }
        getTimer()

        // 使用定时器完成更新
        setInterval(getTimer , 1000)
    </script>

</body>

</html>

效果展示：

三、节点操作

1.DOM树： DOM 将 HTML 文档以树状结构直观的表现出来，我们称之为 DOM 树或者节点树

2.节点（ Node） 是DOM树(节点树)中的单个点。包括文档本身、元素、文本以及注释都属于是节点

3.1元素节点（重点）

（1）所有的标签：比如 body、 div ；html 是根节点

（2）属性节点：所有的属性比如 href

（3）文本节点：所有的文本

（4）学习节点有什么好处？ 利用节点关系可以更好的操作元素（比如查询更方便）

3.2 查找节点

查找节点：利用 节点关系 查找节点，返回的都是 对象； 有了查找节点可以使我们选择元素更加方便

（1）父节点：子元素. parentNode 返回最近一级的父节点对象，找不到返回为 null

（2）子节点：节点对象.children l 获得所有子元素节点，返回的是一个伪数组

（3）兄弟节点：

下一个兄弟：节点对象. nextElementSibling 该属性获取节点的下一个兄弟节点

上一个兄弟：节点对象.previousElementSibling 该属性获取节点的上一个兄弟节点

案例分享：

<!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>查询子节点</title>
</head>

<body>
  <p>我是 ul 前面的 p</p>
  <ul>
    <li>我是第1个li</li>
    <li>我是第2个li</li>
    <li>我是第3个li</li>
    <li>我是第4个li</li>
    <li>我是第5个li</li>
  </ul>
  <div>我是 ul 后面的 div</div>
  <script>
    const ul = document.querySelector('ul')
    // const lis = document.querySelectorAll('li')
    // console.log(lis)
    // 获取 ul 的所有子元素
    console.log(ul.children)

    // 获取兄弟元素
    // ul 的上一个兄弟元素
    console.log(ul.previousElementSibling)
    // ul 的下一个兄弟元素
    console.log(ul.nextElementSibling)
  </script>
</body>

</html>

3.3 增加节点

1.新增节点：

很多情况下，我们需要在页面中增加元素；比如，点击发布按钮，可以新增一条信息；一般情况下，我们新增节点，按照如下操作：

（1）创建一个新的节点；即创造出一个新的网页元素

document.createElement('新增的节点的标签名')

（2）然后把创建的新的节点放入到指定的元素内部

2.追加节点

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

（1）父元素最后一个子节点之后，插入节点元素： element . append ()

（2）父元素第一个子元素的之前，插入节点元素： element . prepend ()

案例分享：

<!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>插入节点</title>
</head>
<body>
  <ul>
    <li>我是原本存在的 li</li>
  </ul>
  <script>
    const ul = document.querySelector('ul')
    // ul.innerHTML = `<li>我是原本存在的 li</li><li>我是新来的 li</li>`
    // 插入子节点
    // 1. 新建
    const li = document.createElement('li')
    li.innerText = '你好哇, 我是新来的'
    // 2. 插入
    // 父节点.append()  在后面插入
    // ul.append(li)
    // 父节点.prepend() 在前面插入
    ul.prepend(li)
  </script>
</body>
</html>

效果展示：

3.3 删除节点

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

语法： element . remove ()

（1）把对象从它所属的 DOM 树中删除

（2）删除节点（ element . remove () ）和隐藏节点（display:none）有区别的：隐藏节点还是存在的，但是删除，则从 DOM树中删除

<!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>删除节点</title>
</head>
<body>
  <div>我会被隐藏</div>
  <div>我会被删除</div>
  <script>
    const divs = document.querySelectorAll('div')
    // console.log(divs)
    divs[0].style.display = 'none'
    // 自杀, 自己干掉自己, 从 DOM 树上移除掉
    divs[1].remove()
  </script>
</body>
</html>

四、移动端触摸事件

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

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

代码分享：

<!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>移动端触摸事件</title>
  <style>
    div {
      width: 200px;
      height: 200px;
      background-color: yellow;
    }
  </style>
</head>
<body>
  <div></div>
  <script>
    const div = document.querySelector('div')
    // 触摸事件
    // touchstart
    div.addEventListener('touchstart', function() {
      console.log('我开始被摸了', +new Date())
    })
    // touchmove
    div.addEventListener('touchmove', function() {
      console.log('我被摸来摸去的')
    })

    // touchend
    div.addEventListener('touchend', function() {
      console.log('我结束被摸了', +new Date())
    })
  </script>
</body>
</html>

效果展示：