日期对象
学会了日期对象可以让网页显示日期
是用来表示时间的对象，可以得到当前系统的时间
实例化
new关键字，就是实例化的代表
就比如说，你没有对象，但是你是程序员，这个时候你可以先定义一个类（你的理想型），再new一个对象出来，这就是实例化
获得当前时间：
获得指定时间：
时间对象方法
我们需要能够使用日期对象中的方法写出常见日期
因为日期对象返回的数据我们不能直接使用，所以需要转换为实际开发的常用格式
页面显示时间：让我们将当前的时间以 YYYY-MM-DD HH:mm的形式显示在页面
<script>
const date = new Date()
let time = date.getFullYear() + '-' + date.getMonth() + '-' + date.getDay() + ' ' + date.getHours() + ':' + date.getMinutes()
document.write(time)
</script>
时间戳
世界是一个巨大的里牛渴死
这就是时间戳应用的实例孩子们
如果计算倒计时效果，前面就没办法直接计算，需要借助时间戳完成
时间戳：
1970年01月01日00时00分00秒起至现在的毫秒数，是一种特殊的计量时间的方式
算法：
将来的时间戳 - 现在的时间戳 = 剩余时间毫秒数
剩余时间毫秒数 转换为 剩余时间的 年月日时分秒 就是 倒计时时间
比如 将来时间戳 2000ms - 现在时间戳 1000ms = 1000ms
1000ms 转换为就是 0小时0分1秒
我们可以使用三种方法获取时间戳：
1.使用getTime()方法
2.简写+new Date()
3.使用Date.now()
这种方法无需实例化，但是只能得到当前时间的时间戳，前面两种可以返回指定时间的时间戳
总结一下：
倒计时效果
需求：计算模电作业截止还有多少时间
分析：
tips：通过时间戳得到的是毫秒，需要转换为秒再计算
这是总公式
<!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: 80px;
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: 34px;
height: 34px;
border-radius: 2px;
background-color: #303430;
}
.countdown .clock i {
width: 20px;
font-style: normal;
}
.countdown .title{
font-size: 26px;
}
</style>
</head>
<body>
<div class="countdown">
<p class="next">今天是2024年11月30日</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">23:30: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() {
// 1. 得到当前的时间戳
const now = +new Date()
// 2. 得到将来的时间戳
const last = +new Date('2024-11-30 23:30:00')
// console.log(now, last)
// 3. 得到剩余的时间戳 count 记得转换为 秒数
const count = (last - now) / 1000
// console.log(count)
// 4. 转换为时分秒
// h = parseInt(总秒数 / 60 / 60 % 24) // 计算小时
// m = parseInt(总秒数 / 60 % 60); // 计算分数
// s = parseInt(总秒数 % 60);
// let d = parseInt(count / 60 / 60 / 24) // 计算当前秒数
let h = parseInt(count / 60 / 60 % 24)
h = h < 10 ? '0' + h : h
let m = parseInt(count / 60 % 60)
m = m < 10 ? '0' + m : m
let s = parseInt(count % 60)
s = s < 10 ? '0' + s : s
console.log(h, m, s)
// 5. 把时分秒写到对应的盒子里面
document.querySelector('#hour').innerHTML = h
document.querySelector('#minutes').innerHTML = m
document.querySelector('#scond').innerHTML = s
}
// 先调用一次
getCountTime()
// 开启定时器
setInterval(getCountTime, 1000)
</script>
</body>
</html> 
节点操作
DOM节点
DOM树里每个内容都称之为节点
节点类型：
元素节点可以让我们更好的厘清标签元素之间的关系
查找节点
点击关闭按钮，关闭的是二维码的盒子，还要获取erweima盒子
关闭按钮和erweima是父子关系，所以我们点击关闭按钮直接关闭它的爸爸就无需获取erweima元素了（我对这种命名方式很无语啊，这和直接叫个中文名有啥区别）
还有那身份认证，我真是服了
谁没由来送我个国外手机号，或者手机能用的VPN也行
节点关系：针对的找亲戚返回的都是对象
父节点查找用parentNode 属性，返回最近一级的父节点 找不到返回为null
关闭二维码案例
李伟兴 09:31:13
<!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>
.box {
position: relative;
width: 1000px;
height: 200px;
background-color: pink;
margin: 100px auto;
text-align: center;
font-size: 50px;
line-height: 200px;
font-weight: 700;
}
.box1 {
position: absolute;
right: 20px;
top: 10px;
width: 20px;
height: 20px;
background-color: skyblue;
text-align: center;
line-height: 20px;
font-size: 16px;
cursor: pointer;
}
</style>
</head>
<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>
// // 1. 获取事件源
// const box1 = document.querySelector('.box1')
// // 2. 事件侦听
// box1.addEventListener('click', function () {
// this.parentNode.style.display = 'none'
// })
// 1. 获取三个关闭按钮
const closeBtn = document.querySelectorAll('.box1')
for (let i = 0; i < closeBtn.length; i++) {
closeBtn[i].addEventListener('click', function () {
// 关闭我的爸爸 所以只关闭当前的父元素
this.parentNode.style.display = 'none'
})
}
</script>
</body>
</html>以上是查找父节点的实例
让我们准备查找子节点childNodes
获得所有子节点、包括文本节点（空格、换行）、注释节点等
还有一种属性更加重要：
兄弟关系查找：
总结一下：
增加节点
在很多时候，我们需要在页面中增加元素（比如点击发布按钮就可以新增一条信息）
一般情况下，我们新增结点，是按照以下的步骤进行操作的：
增加节点一般分为创建节点和插入节点这两个步骤
创建元素节点方法：
追加节点：想要在页面中看到，还需要插入到某个父元素中
插入到父元素的最后一个子元素：
插入到父元素中某个子元素的前面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li>
</li>
</ul>
<script>
const ul = document.querySelector('ul')
const li = document.createElement('li')
li.innerHTML = '我是li'
ul.insertBefore(li,ul.children[0])
</script>
</body>
</html>学成在线案例渲染
<!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')
// 1. 根据数据的个数，创建 对应的小li
for (let i = 0; i < data.length; i++) {
// 2. 创建新的小li
const li = document.createElement('li')
// 把内容给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>
`
// 3. ul追加小li
ul.appendChild(li)
}
</script>
</body>
</html>增加节点除了增加，还可以复制
复制一个原有的节点，把复制的节点放入指定的元素内部
克隆节点：
cloneNode会克隆出一个跟原标签一样的元素，括号内传入布尔值
太好了我最喜欢 干的事情就是CV了
删除节点
一个节点如果不需要就删了
在JS的原生DOM操作中，删除元素必须通过父元素删除
如果不存在父子关系则删除不成功
删除节点和隐藏节点是有区别的，隐藏节点存在，但是删除是从html中删除节点
M端事件
移动端有自己的独特之地，比如触屏事件touch（触摸事件），Android 和 IOS 都有
touch 对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触摸笔。触屏事件可响应用户手指（或触控笔 ）对屏幕或者触控板操作
常见的触屏事件：
JS插件
如果用M端事件直接手搓轮播图有点麻烦，所以我们用对应的插件来解决这个问题
要学会使用swiper
https://www.swiper.com.cn/
https://www.swiper.com.cn/demo/index.html
https://www.swiper.com.cn/usage/index.html
https://www.swiper.com.cn/api/index.html
直接把插件下载下来
解压缩之后就是这样，css和js在modules里面
至于用法，则全部是复制粘贴
查看自己想要的效果，记住序号，然后复制粘贴
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入外部样式 -->
<link rel="stylesheet" href="../../../swiper/swiper-bundle.min.css">
<style>
.box {
width: 800px;
height: 300px;
background-color: pink;
margin: 100px auto;
}
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>
<!-- Swiper -->
<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/swiper-bundle.min.js">
</script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper(".mySwiper", {
pagination: {
el: ".swiper-pagination",
},
});
</script>
</body>
</html>就是挑喜欢的，然后进行引入
可以通过查看文档来判断不同的实例
综合案例
我们要完成一个学生信息表的制作案例
点击录入按钮可以录入数据，点击删除可以删除当前的数据
我们尽量减少dom操作，采用操作数据的形式
增加和删除都是针对于数组的操作，根据数组数据渲染页面
先看看增加的对应操作吧：
<script>
// 获取元素
const uname = document.querySelector('.uname')
const age = document.querySelector('.age')
const gender = document.querySelector('.gender')
const salary = document.querySelector('.salary')
const city = document.querySelector('.city')
const tbody = document.querySelector('tbody')
// 首先我们要声明一个空的数组，增加和删除都是对这个数组进行操作
const arr = []
// 录入模块
// 准备表单提交事件
const info = document.querySelector('.info')
info.addEventListener('submit', function (e) {
// 阻止默认行为，不跳转
e.preventDefault()
// 下面就是创建新的对象了
const obj = {
StuId: arr.length + 1,
uname: uname.value,
age: age.value,
gender: gender.value,
salary: salary.value,
city: city.value
}
// 把对象追加到数组里面
arr.push(obj)
// 清空表单 重置
this.reset()
// 调用渲染函数
render()
})
// 单独封装渲染函数，增加和删除都需要渲染
function render() {
// 要先清空tbody以前的行，把里面的数据都渲染完毕
tbody.innerHTML = ' '
for (let i = 0; i < arr.length; i++) {
const tr = document.createElement('tr')
tr.innerHTML =
`
<td>${arr[i].StuId}</td>
<td>${arr[i].uname}</td>
<td>${arr[i].age}</td>
<td>${arr[i].gender}</td>
<td>${arr[i].salary}</td>
<td>${arr[i].city}</td>
<td>
<a href="javascript:">删除</a>
</td>
`
// 追加元素
tbody.appendChild(tr)
}
}
</script>然后来进行删除方面的操作
// 删除操作
// 事件委托
tbody.addEventListener('click',function(e){
if(e.target.tagName === 'A')
{
// 搞个自定义属性，方便找到索引
// 得到当前元素的自定义属性
arr.splice(e.target.dataset.id,1)
render()
}
})我们需要让表单新增添加验证，要不然该录入为空了
const items = document.querySelectorAll('[name]')
// 在这进行表单验证
// 如果不通过的话就直接中断，不需要添加数据
// 先要遍历循环
for(let i = 0;i<items.length;i++){
if(items[i].value === '')
{
return alert('输入内容不能为空')
}
}至此就全部完成啦：
<!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="./index.css" />
</head>
<body>
<h1>新增学员</h1>
<form class="info" autocomplete="off">
姓名：<input type="text" class="uname" name="uname" />
年龄：<input type="text" class="age" name="age" />
性别:
<select name="gender" class="gender">
<option value="男">男</option>
<option value="女">女</option>
</select>
薪资：<input type="text" class="salary" name="salary" />
就业城市：<select name="city" class="city">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州">广州</option>
<option value="深圳">深圳</option>
<option value="曹县">曹县</option>
</select>
<button class="add">录入</button>
</form>
<h1>就业榜</h1>
<table>
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>薪资</th>
<th>就业城市</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<!--
<tr>
<td>1001</td>
<td>欧阳霸天</td>
<td>19</td>
<td>男</td>
<td>15000</td>
<td>上海</td>
<td>
<a href="javascript:">删除</a>
</td>
</tr>
-->
</tbody>
</table>
<script>
// 获取元素
const uname = document.querySelector('.uname')
const age = document.querySelector('.age')
const gender = document.querySelector('.gender')
const salary = document.querySelector('.salary')
const city = document.querySelector('.city')
const tbody = document.querySelector('tbody')
// 首先我们要声明一个空的数组，增加和删除都是对这个数组进行操作
const arr = []
// 录入模块
// 准备表单提交事件
const info = document.querySelector('.info')
info.addEventListener('submit', function (e) {
// 阻止默认行为，不跳转
e.preventDefault()
// 获取所有带name属性的元素
const items = document.querySelectorAll('[name]')
// 在这进行表单验证
// 如果不通过的话就直接中断，不需要添加数据
// 先要遍历循环
for(let i = 0;i<items.length;i++){
if(items[i].value === '')
{
return alert('输入内容不能为空')
}
}
// 下面就是创建新的对象了
const obj = {
StuId: arr.length + 1,
uname: uname.value,
age: age.value,
gender: gender.value,
salary: salary.value,
city: city.value
}
// 把对象追加到数组里面
arr.push(obj)
// 清空表单 重置
this.reset()
// 调用渲染函数
render()
})
// 单独封装渲染函数，增加和删除都需要渲染
function render() {
// 要先清空tbody以前的行，把里面的数据都渲染完毕
tbody.innerHTML = ' '
for (let i = 0; i < arr.length; i++) {
const tr = document.createElement('tr')
tr.innerHTML =
`
<td>${arr[i].StuId}</td>
<td>${arr[i].uname}</td>
<td>${arr[i].age}</td>
<td>${arr[i].gender}</td>
<td>${arr[i].salary}</td>
<td>${arr[i].city}</td>
<td>
<a href="javascript:" data-id=${i}>删除</a>
</td>
`
// 追加元素
tbody.appendChild(tr)
}
}
// 删除操作
// 事件委托
tbody.addEventListener('click',function(e){
if(e.target.tagName === 'A')
{
// 搞个自定义属性，方便找到索引
// 得到当前元素的自定义属性
arr.splice(e.target.dataset.id,1)
render()
}
})
</script>
</body>
</html>
重绘和回流
来看看浏览器是如何进行页面渲染的：
看不懂这个没事，我们有中文版
重绘和回流的概念：
会导致回流的操作：
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
