4.1-日期对象的使用
![](https://i-blog.csdnimg.cn/blog_migrate/12e9a52116c143ef381a5a44551a2b51.png)
![](https://i-blog.csdnimg.cn/blog_migrate/9d5ad4d2935319878e56aabc93743c01.png)
![](https://i-blog.csdnimg.cn/blog_migrate/5e8cd4fd79255868bc9f3a197571d0f9.png)
![](https://i-blog.csdnimg.cn/blog_migrate/ab254979485f12edb17894b0643ab876.png)
![](https://i-blog.csdnimg.cn/blog_migrate/6a152bb96966ec4c3b2a1eef043ea7d3.png)
![](https://i-blog.csdnimg.cn/blog_migrate/ddf02df72b3c6b33214a315c71e26520.png)
![](https://i-blog.csdnimg.cn/blog_migrate/6ba9e3413801d9885ed347facdaf0d26.png)
![](https://i-blog.csdnimg.cn/blog_migrate/a74f4c269f8745a54bce782ed2423630.png)
![](https://i-blog.csdnimg.cn/blog_migrate/1a395a824e6c156b65fe555185465963.png)
![](https://i-blog.csdnimg.cn/blog_migrate/842f17924bebef74d1e51f4f3e4cfcc8.png)
![](https://i-blog.csdnimg.cn/blog_migrate/516c2e4958be6fd9ec47c2dcf81a3c9e.png)
![](https://i-blog.csdnimg.cn/blog_migrate/c4bc19c9ba07c9035724c29d68d0ad16.png)
![](https://i-blog.csdnimg.cn/blog_migrate/7c231f6895dd3e13687f88d8b1c556b1.png)
![](https://i-blog.csdnimg.cn/blog_migrate/eb29dd5263f478fd14ccda94f24ed0ce.png)
4.2-时间戳的使用
![](https://i-blog.csdnimg.cn/blog_migrate/32591dc19f5d253b62e51c96431a3324.png)
![](https://i-blog.csdnimg.cn/blog_migrate/530286c4d9d4d1320736ce5f15efba17.png)
![](https://i-blog.csdnimg.cn/blog_migrate/67bb2a4992f218c407bbdb5de1e338f9.png)
![](https://i-blog.csdnimg.cn/blog_migrate/9102644321e16155c91e26e44c66b334.png)
![](https://i-blog.csdnimg.cn/blog_migrate/789b6dce4712e69918abb15ba3a083e0.png)
![](https://i-blog.csdnimg.cn/blog_migrate/da6dfc0aaec3cb3ff00ec097f7cfd94d.png)
4.3-倒计时案例的制作
![](https://i-blog.csdnimg.cn/blog_migrate/ee485dd43eeefecafaedd651ee030031.png)
4.4-查找DOM节点
![](https://i-blog.csdnimg.cn/blog_migrate/87938c44e8c4d7ec13009900ef8010fb.png)
![](https://i-blog.csdnimg.cn/blog_migrate/67a0090ca5dd8372c799be7327823aff.png)
![](https://i-blog.csdnimg.cn/blog_migrate/27d276f43e9b84b2df659eb1b1ba77a6.png)
![](https://i-blog.csdnimg.cn/blog_migrate/ac08f0b26cc1464c13aae4cd945d5d01.png)
![](https://i-blog.csdnimg.cn/blog_migrate/c269c55079b92e6ed65293fcd0a1ac32.png)
![](https://i-blog.csdnimg.cn/blog_migrate/15e761727d08738b2d198eacb13d2c93.png)
![](https://i-blog.csdnimg.cn/blog_migrate/e1ac0b940c7865ca25fc9a7f0c4be28e.png)
![](https://i-blog.csdnimg.cn/blog_migrate/91681d4beac40dba674ab4c854c98ee7.png)
![](https://i-blog.csdnimg.cn/blog_migrate/37ceaa5f90a3c717cf374398cd79c9fd.png)
![](https://i-blog.csdnimg.cn/blog_migrate/749905e6558e70cb0268e99ffffc94b9.png)
![](https://i-blog.csdnimg.cn/blog_migrate/2f551910eac9ee8395171341b40cd3e0.png)
![](https://i-blog.csdnimg.cn/blog_migrate/a6a44e03d83c48a048e0bd33d390948d.png)
![](https://i-blog.csdnimg.cn/blog_migrate/ec97356706b17cab27a354fca7b2cfb8.png)
![](https://i-blog.csdnimg.cn/blog_migrate/5d63811fded9f1acf3e99b71406fe39c.png)
![](https://i-blog.csdnimg.cn/blog_migrate/b06217b9ecf3c94d86d42a3bea7dd612.png)
![](https://i-blog.csdnimg.cn/blog_migrate/ce465c73d693352ecca0fd495dc63bee.png)
![](https://i-blog.csdnimg.cn/blog_migrate/a6a576de618cabb7bd2de4abecdd864d.png)
![](https://i-blog.csdnimg.cn/blog_migrate/29ac4671577ae185133606618bbaab21.png)
4.5-增加节点以及学成在线案例
![](https://i-blog.csdnimg.cn/blog_migrate/7b6c532bf916cb176106ef68feddf391.png)
![](https://i-blog.csdnimg.cn/blog_migrate/1088face8d902e7b9e509ec56fe5095d.png)
![](https://i-blog.csdnimg.cn/blog_migrate/85c2de899df299a8b15eb56c9a83f62e.png)
![](https://i-blog.csdnimg.cn/blog_migrate/6b90a8abbf544b26a14ff8b98051ff6c.png)
![](https://i-blog.csdnimg.cn/blog_migrate/b58fd8f79f58ed6feffd5bbb6ba38112.png)
![](https://i-blog.csdnimg.cn/blog_migrate/7834b1e0e5efe69c3e7eeb0b9da6347b.png)
![](https://i-blog.csdnimg.cn/blog_migrate/6b3bb5f538574839f3ade67bbe94f56f.png)
![](https://i-blog.csdnimg.cn/blog_migrate/ea0549e79ff9b5705e8570b95ea8193d.png)
![](https://i-blog.csdnimg.cn/blog_migrate/29fb2fe19b54503fa4aa803431736e98.png)
4.6-克隆节点和删除节点
![](https://i-blog.csdnimg.cn/blog_migrate/e6e419221680e1982c5d86fdd5628866.png)
![](https://i-blog.csdnimg.cn/blog_migrate/ee89feb9ac7a50fb2eba3c6fe51207b8.png)
![](https://i-blog.csdnimg.cn/blog_migrate/7b61ca9feb60e90f7a559cc44d2b7ad4.png)
![](https://i-blog.csdnimg.cn/blog_migrate/d9f9715ce5e256d95e6d2e3f5432fa39.png)
![](https://i-blog.csdnimg.cn/blog_migrate/dd6b2ec717b6b803edc1c04ec1745133.png)
4.7-M端事件
![](https://i-blog.csdnimg.cn/blog_migrate/1e2a218c829dc26ab7895a817900a28c.png)
![](https://i-blog.csdnimg.cn/blog_migrate/012c3864a1bc3fd49d71cebff4ba383d.png)
4.8-swiper插件的使用
![](https://i-blog.csdnimg.cn/blog_migrate/a4a01f0fcbe670e739e71baa113ce7fc.png)
![](https://i-blog.csdnimg.cn/blog_migrate/fade0ec8b50d0540fcdf18fe762474db.png)
![](https://i-blog.csdnimg.cn/blog_migrate/efecb89ff7549b657d3ab26ffe577286.png)
4.9-今日综合案例-学生信息表
![](https://i-blog.csdnimg.cn/blog_migrate/b4f16a43cb1191b754690ba7b05d835e.png)
![](https://i-blog.csdnimg.cn/blog_migrate/659f75610c9107edf2e2d6de8df8a233.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/715148325e3c3382c5d7f7055be27278.png)
![](https://i-blog.csdnimg.cn/blog_migrate/da596535be78be2cb39d20aacee77c09.png)
B站
<!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/index.css" />
<style>
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color:#721c24;
}
h1 {
text-align: center;
color:#333;
margin: 20px 0;
}
table {
margin:0 auto;
width: 800px;
border-collapse: collapse;
color:#004085;
}
th {
padding: 10px;
background: #cfe5ff;
font-size: 20px;
font-weight: 400;
}
td,th {
border:1px solid #b8daff;
}
td {
padding:10px;
color:#666;
text-align: center;
font-size: 16px;
}
tbody tr {
background: #fff;
}
tbody tr:hover {
background: #e1ecf8;
}
.info {
width: 900px;
margin: 50px auto;
text-align: center;
}
.info input, .info select {
width: 80px;
height: 27px;
outline: none;
border-radius: 5px;
border:1px solid #b8daff;
padding-left: 5px;
box-sizing: border-box;
margin-right: 15px;
}
.info button {
width: 60px;
height: 27px;
background-color: #004085;
outline: none;
border: 0;
color: #fff;
cursor: pointer;
border-radius: 5px;
}
.info .age {
width: 50px;
}
</style>
</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')
// 获取所有带有name属性的 元素
const items = document.querySelectorAll('[name]')
// 声明一个空的数组, 增加和删除都是对这个数组进行操作
const arr = []
// 1. 录入模块
// 1.1 表单提交事件
const info = document.querySelector('.info')
info.addEventListener('submit', function (e) {
// 阻止默认行为 不跳转
e.preventDefault()
// console.log(11)
// 这里进行表单验证 如果不通过,直接中断,不需要添加数据
// 先遍历循环
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
}
// console.log(obj)
// 追加给数组里面
arr.push(obj)
// console.log(arr)
// 清空表单 重置
this.reset()
// 调用渲染函数
render()
})
// 2. 渲染函数 因为增加和删除都需要渲染
function render() {
// 先清空tbody 以前的行 ,把最新数组里面的数据渲染完毕
tbody.innerHTML = ''
// 遍历arr数组
for (let i = 0; i < arr.length; i++) {
// 生成 tr
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>
`
// 追加元素 父元素.appendChild(子元素)
tbody.appendChild(tr)
}
}
// 3. 删除操作
// 3.1 事件委托 tbody
tbody.addEventListener('click', function (e) {
if (e.target.tagName === 'A') {
// 得到当前元素的自定义属性 data-id
// console.log(e.target.dataset.id)
// 删除arr 数组里面对应的数据
arr.splice(e.target.dataset.id, 1)
console.log(arr)
// 从新渲染一次
render()
}
})
</script>
</body>
</html>
-----------