当前位置：首页 > news >正文

Web APIs 4：日期对象、时间戳、节点操作、swiper插件

news 2025/5/5 17:26:26

Web APIs 4（日期对象、节点操作、swiper插件）

1.实例化日期对象

获得当前时间：const date = new Date()
获得指定时间：const data = new Date(‘2024-1-1 08:30:30’)

2.日期对象方法

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

单个获取日期实现自定义格式：

<body><div></div><script>function getMyDate() {const date = new Date()console.log(date);let h = date.getHours()h = h < 10 ? '0' + h : hlet m = date.getMinutes()m = m < 10 ? '0' + m : mlet s = date.getSeconds()s = s < 10 ? '0' + s : sreturn `今天是：${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日${h}:${m}:${s} 星期${date.getDay()}`}const div = document.querySelector('div')div.innerHTML = getMyDate()  //使第一秒不是空白setInterval(function () {div.innerHTML = getMyDate()}, 1000)</script>
</body>

使用toLocaleString()方法格式显示：

 <script>const div = document.querySelector('div')const date = new Date()div.innerHTML = date.toLocaleDateString() //2024/925div.innerHTML = date.toLocaleString() //2024/9/25 15:47:25</script>

3.时间戳

概念：是指1970年01月01日00时00分00秒起至现在的毫秒数，它是一种特殊的计量时间的方式
使用场景：倒计时效果
将来的时间戳-现在的时间戳=剩余时间的毫秒数（转换为时间的年月日时分秒就是倒计时时间）
获取时间戳方法：
- getTime()方法：需要先实例化
- +new Date()方法：常用
- Date.now()方法：只能得到当前的时间戳

 <script>//第一种方法const date = new Date('2024-1-1 08:30:30')console.log(date.getTime())//第二种方法console.log(+new Date('2024-1-1 08:30:30'))//第三种方法console.log(Date.now())</script>

案例：倒计时

<body><div class="countdown"><p class="next">今天是2222年2月22日</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>const date = new Date()const next = document.querySelector('.next')next.innerHTML = `今天是${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`function getCountTime() {//当前时间戳const now = +new Date()console.log(now)//将来时间戳const last = +new Date('2024-9-26 18:30:00')//剩余时间戳const time = (last - now) / 1000//获取时分秒let h = parseInt(time / 60 / 60 % 24)h = h < 10 ? '0' + h : hlet m = parseInt(time / 60 % 60)m = m < 10 ? '0' + m : mlet s = parseInt(time % 60)s = s < 10 ? '0' + s : s//写到对应盒子const hour = document.querySelector('#hour')const min = document.querySelector('#minutes')const sec = document.querySelector('#scond')hour.innerHTML = hmin.innerHTML = msec.innerHTML = s}//先调用一次,防止最开始的空白getCountTime()//定时器函数不要加小括号setInterval(getCountTime, 1000)// 随机颜色函数// 1. 自定义一个随机颜色函数function getRandomColor(flag = true) {if (flag) {// 3. 如果是true 则返回 #fffffflet 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)  // 55let g = Math.floor(Math.random() * 256)  // 89let b = Math.floor(Math.random() * 256)  // 255return `rgb(${r},${g},${b})`}}const countdown = document.querySelector('.countdown')countdown.style.backgroundColor = getRandomColor()</script>
</body>

4.节点操作（针对元素节点）

DOM节点：DOM树中的每一个内容
节点类型：
- 元素节点：所有的标签，eg：body、div
- 属性节点：所有的属性，eg：href
- 文本节点：所有文本
节点关系
- 父节点
- 子节点
- 兄弟节点
查找节点：（通过节点间关系）：不用多次使用querySelector()去获取节点
- 父节点：子元素.parentNode（最近一级）
- 子节点：
  - 父元素.childNodes：获取所有子节点，包括文本、注释等
  - children(重点)：仅获取所有元素节点，返回伪数组
- 兄弟节点：
  - 下一个兄弟节点：nextElementSibling属性
  - 上一个兄弟节点：previousElementSibling属性

增加节点

创建节点：

document.createElement(‘标签名’)

追加节点：

//插入到这个父元素的最后父元素.appendChild(要插入的元素)
//插入到父元素中某个子元素的前面父元素.insertBefore(要插入的元素, 在哪个元素前面)

<body><ul><li>我是第一个</li></ul><script>const ul = document.querySelector('ul')//创建节点const li2 = document.createElement('li')li2.innerHTML = '我是第二个'//将li2插入ul的最后ul.appendChild(li2)//创建节点const lim = document.createElement('li')lim.innerHTML = '我在第一个和第二个之间'//将lim节点插到li2的前面ul.insertBefore(lim, li2)</script>
</body>

克隆节点：元素.cloneNode(布尔值)
- true：克隆包含后代节点一起克隆
- false：克隆不包含后代节点，默认为false

删除节点：必须通过父元素删除

父元素.removeChild(要删除的元素)

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

5.M端（移动端）事件：触摸事件

touchstart：手指触摸到
touchmove：手指滑动
touchend：手指移开

6.swiper插件

纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。能实现触屏焦点图、触屏Tab切换、触屏轮播图切换等常用效果。
操作步骤：
- 进入swiper官网
- 下载插件
- 根据官网使用方法导入.css和.js文件
- 在官网查看演示视频，并在新窗口点击查看源码进行复制
- 根据API文档添加想要的效果

案例：轮播图

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./swiper-bundle.min.css"><style>.box {position: relative;margin: 100px auto;width: 600px;height: 300px;background-color: pink;}html,body {position: relative;height: 100%;}body {background: #eee;font-family: Helvetica Neue, Helvetica, Arial, sans-serif;font-size: 14px;color: #000;margin: 0;padding: 0;}.swiper {width: 100%;height: 100%;}.swiper-slide {text-align: center;font-size: 18px;background: #fff;display: flex;justify-content: center;align-items: center;}.swiper-slide img {display: block;width: 100%;height: 100%;object-fit: cover;}</style>
</head><body><div class="box"><div class="swiper mySwiper"><div class="swiper-wrapper"><div class="swiper-slide">Slide 1</div><div class="swiper-slide">Slide 2</div><div class="swiper-slide">Slide 3</div><div class="swiper-slide">Slide 4</div><div class="swiper-slide">Slide 5</div><div class="swiper-slide">Slide 6</div><div class="swiper-slide">Slide 7</div><div class="swiper-slide">Slide 8</div><div class="swiper-slide">Slide 9</div></div><div class="swiper-pagination"></div></div></div><script src="./swiper-bundle.min.js"></script><!-- Initialize Swiper --><script>var swiper = new Swiper(".mySwiper", {loop: true,pagination: {el: ".swiper-pagination",},autoplay: {delay: 1000,//1秒切换一次pauseOnMouseEnter: true,},});</script>
</body></html>