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 |
- 单个获取日期实现自定义格式：
html
<body>
<div></div>
<script>
function getMyDate() {
const date = new Date()
console.log(date);
let h = date.getHours()
h = h < 10 ? '0' + h : h
let m = date.getMinutes()
m = m < 10 ? '0' + m : m
let s = date.getSeconds()
s = s < 10 ? '0' + s : s
return `今天是：${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()方法格式显示：
js
<script>
const div = document.querySelector('div')
const date = new Date()
div.innerHTML = date.toLocaleDateString() //2024/925
div.innerHTML = date.toLocaleString() //2024/9/25 15:47:25
</script>3.时间戳
- 概念：是指1970年01月01日00时00分00秒起至现在的毫秒数，它是一种特殊的计量时间的方式
- 使用场景：倒计时效果
- 将来的时间戳-现在的时间戳=剩余时间的毫秒数（转换为时间的年月日时分秒就是倒计时时间）
- 获取时间戳方法：
- getTime()方法：需要先实例化
- +new Date()方法：常用
- Date.now()方法：只能得到当前的时间戳
js
<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>案例：倒计时
html
<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 : h
let m = parseInt(time / 60 % 60)
m = m < 10 ? '0' + m : m
let 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 = h
min.innerHTML = m
sec.innerHTML = s
}
//先调用一次,防止最开始的空白
getCountTime()
//定时器函数不要加小括号
setInterval(getCountTime, 1000)
// 随机颜色函数
// 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()
</script>
</body>4.节点操作（针对元素节点）
-
DOM节点：DOM树中的每一个内容
-
节点类型：
- 元素节点：所有的标签，eg：body、div
- 属性节点：所有的属性，eg：href
- 文本节点：所有文本
-
节点关系
- 父节点
- 子节点
- 兄弟节点
-
查找节点：（通过节点间关系）：不用多次使用querySelector()去获取节点
- 父节点：子元素.parentNode（最近一级）
- 子节点：
- 父元素.childNodes：获取所有子节点，包括文本、注释等
- children(重点)：仅获取所有元素节点，返回伪数组
- 兄弟节点：
- 下一个兄弟节点：nextElementSibling属性
- 上一个兄弟节点：previousElementSibling属性
-
增加节点
-
创建节点：
document.createElement('标签名')
-
追加节点：
js//插入到这个父元素的最后 父元素.appendChild(要插入的元素) //插入到父元素中某个子元素的前面 父元素.insertBefore(要插入的元素, 在哪个元素前面)
html<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(要删除的元素)
html<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文档添加想要的效果
案例：轮播图
html
<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>