Web APIs 4 日期对象、节点操作

于 2024-03-09 14:02:17 发布
阅读量1k 收藏 10
点赞数 7
CC 4.0 BY-SA版权
分类专栏： JavaScript 文章标签： 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/yavlgloss/article/details/136579992
本文介绍了JavaScript中日期对象的实例化、方法及时间戳的应用，详细讲解了节点操作，包括查找父、子、兄弟节点以及DOM操作，同时涵盖了移动端触屏事件和Swiper插件的使用。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

Web APIs 4

一、日期对象

学习路径：实例化、日期对象方法、时间戳

实例化

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

获得当前时间

const date = new Date()
console.log(date) // Mon Feb 19 2024 16:45:04 GMT+0800 (中国标准时间)

获得指定时间

const date = new Date('2008-8-8')
console.log(date) // Fri Aug 08 2008 00:00:00 GMT+0800 (中国标准时间)

日期对象方法

在这里插入图片描述

const date = new Date()
console.log(date.getFullYear()); // 2024
console.log(date.getMonth() + 1); // 2
console.log(date.getDate()); // 19
console.log(date.getDay());//返回的是 周几，但是周天是0

案例：页面显示时间

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

<style>
  div {
    width: 300px;
    height: 40px;
    border: 1px solid pink;
    text-align: center;
    line-height: 40px;
  }
</style>
<body>
  <div></div>
</body>
<script>
  function getMyDate() {
    const date = new Date()

    let month = date.getMonth() + 1
    let day = date.getDate()
    let h = date.getHours()
    let m = date.getMinutes()
    let s = date.getSeconds()

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

    return `${date.getFullYear()}年${month}月${day}日
            ${h}:${m}:${s}`
    // return `2024年2月19日 16:56:00`
  }

  const div = document.querySelector('div')
  

  div.innerHTML = getMyDate()
  //如果不写上面这一句 刷新的时候会有空白，回调函数的意思是隔了一秒再调用
  setInterval(function(){
    div.innerHTML = getMyDate()
  },1000)
</script>

或者还有几种方法

<script>
  const div = document.querySelector('div')
  const date = new Date()
  
  div.innerHTML = date.toLocaleString() //2024/2/19 17:10:43
  div.innerHTML = date.toLocaleDateString() //2024/2/19
  div.innerHTML = date.toLocaleTimeString() //17:11:35
</script>

时间戳

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

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

算法：

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

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

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

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

在这里插入图片描述

// 指定时间的时间戳
console.log(+new Date('2022-4-1 18:30:00'))

二、节点操作

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

节点类型

①元素节点

​ 所有的标签 比如 body、 div

​ html 是根节点

②属性节点

​ 所有的属性 比如 href

③文本节点

​ 所有的文本

④其他
在这里插入图片描述

重点记住元素节点

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

查找结点

关闭二维码案例：点击关闭按钮， 关闭的是二维码的盒子（也就是按钮的父节点）， 还要获取二维码盒子

解法：关闭按钮 和 二维码是父子关系。所以，我们完全可以这样做：点击关闭按钮， 直接关闭它的爸爸，就无需获取二维码元素了

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

​ 父节点

​ 子节点

​ 兄弟节点

查找结点默认元素节点。

①父节点查找

parentNode 属性

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

语法 ：子节点.parentNode

<body>
  <div class="grandfather">
    <div class="dad">
      <div class="baby"></div>
    </div>
  </div>
</body>
<script>
  const baby = document.querySelector('.baby')
  console.log(baby);
  console.log(baby.parentNode);
  console.log(baby.parentNode.parentNode);
</script>

在这里插入图片描述

广告关闭案例

  <div class="box">
    我是广告
    <div class="box1">X</div>
  </div>
  <script>
    const box1 = document.querySelector('.box1')
    box1.addEventListener('click', function() {
      this.parentNode.style.display = 'none'
        //这里用了this
    })
  </script>


这里如果有多个广告
<body>
  <div class="box">
    我是广告
    <div class="box1">X</div>
  </div>
  <div class="box">
    我是广告
    <div class="box1">X</div>
  </div>
  <div class="box">
    我是广告
    <div class="box1">X</div>
  </div>
  <script>
    const closeBtn = document.querySelectorAll('.box1')
    for(let i = 0; i < closeBtn.length; i++) {
      closeBtn[i].addEventListener('click', function() {
        this.parentNode.style.display = 'none'
      })
    }
  </script>

②子节点查找

  • childNodes

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

  • children 属性 （重点）

​ 仅获得所有元素节点

​ 返回的还是一个伪数组，选的是最近的子节点

<body>
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</body>
<script>
  const ul = document.querySelector('ul')
  console.log(ul.children);
</script>

③兄弟节点查找

  • 下一个兄弟节点 nextElementSibling 属性
  • 上一个兄弟节点 previousElementSibling 属性
<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ul>
</body>
<script>
  const li2 = document.querySelector('ul li:nth-child(2)')
  console.log(li2.previousElementSibling);
  console.log(li2.nextElementSibling);
</script>

增加节点

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

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

  • 创建一个新的节点

  • 把创建的新的节点放入到指定的元素内部

步骤1.创建节点

创建元素节点方法 document.createElement(‘标签名’)

步骤2.追加节点

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

  • 插入到父元素的最后一个子元素： 父元素.appendChild(要插入的元素)

  • 插入到父元素中某个子元素的前面： 父元素.insertBefore(要插入的元素，在那个元素前面) 

<body>
  <ul>
    <li>哈哈哈</li>
  </ul>
</body>
<script>
  const ul = document.querySelector('ul')

  const li = document.createElement('li')
  li.innerHTML="我是追加的li"
  ul.appendChild(li)
</script>

<body>
  <ul>
    <li>哈哈哈</li>
  </ul>
</body>
<script>
  const ul = document.querySelector('ul')

  const li = document.createElement('li')
  li.innerHTML="我是追加的li"

  ul.insertBefore(li, ul.children[0])
</script>

克隆节点

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

复制一个原有的节点

把复制的节点放入到指定的元素内部 先克隆再追加

语法：元素.cloneNode(布尔值)

  • 克隆一个已有节点
  • 括号内传入布尔值：若为true，则代表克隆时会包含后代节点一起克隆；若为false，则代表克隆时不包含后代节点(只克隆标签)； 默认为false，大部分情况都是true
<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
</body>
<script>
  const ul = document.querySelector('ul')
  // 克隆第一个li
  const li1_copy = ul.children[0].cloneNode(true)

  ul.appendChild(li1_copy)
</script>

删除节点

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

在 JavaScript 原生DOM操作中，要删除元素必须通过父元素删除，这里必须是亲爸爸亲儿子

语法：父元素.removeChild(要删除的元素)

【注意】：

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

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

<body>
  <ul>
    <li>没用的</li>
    <li>有用的</li>
  </ul>
</body>
<script>
  const ul = document.querySelector('ul')
  ul.removeChild(ul.children[0])
</script>

三、M端事件

M端，就是mobile，移动端。

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

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

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

  • 常见的触屏事件如下：
    在这里插入图片描述

<style>
  div {
    width: 300px;
    height: 400px;
    background-color: pink;
  }
</style>
<body>
  <div></div>
</body>
<script>
  const div = document.querySelector('div')
  div.addEventListener('touchstart', function() {
    console.log('开始触摸');
  })
  div.addEventListener('touchend', function() {
    console.log('触摸结束');
  })
  div.addEventListener('touchmove', function() {
    console.log('一直触摸');
  })
</script>

四、JS插件

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

  • 学习插件的基本过程

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

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值