目录
一、日期对象
想让网页显示日期就得用日期对象，可以得到当前的系统时间
（一）实例化
如果在代码中发现了 new 关键字 就称这个操作为实例化
获得当前时间： const data = new Date()
<body>
<script>
const date = new Date()
console.log(date)
</script>
</body>
获得指定时间：const date1 = new Date('2022-5-1 08：30：00')
可以用作倒计时
<body>
<script>
const date = new Date('2022-5-1')
console.log(date)
</script>
</body>（二）日期对象方法
我们需要能用日期对象中的方法写出常见日期
getFullYear() 获取四位年份
getMonth() 获得月份 0-11
getDate() 获得月份的每一天，不同月份取值不同。
getDay() 获得星期 0-6 0 是星期天
得先获得对象再用上面那些方法 得到的月份是从 0 开始的所以要加1
<body>
<script>
const date = new Date()
console.log(date.getFullYear())
console.log(date.getMonth() + 1)
console.log(date.getDate())
console.log(date.getDay())
</script>
</body>在 div 中动态显示现在时间
<body>
<div></div>
<script>
const div = document.querySelector('div')
const date = new Date()
div.innerHTML = date.toLocaleString()
setInterval(function () {
const date = new Date()
div.innerHTML = date.toLocaleString()
}, 1000)
</script>
</body>（三）时间戳
1.时间戳介绍
如果要进行倒计时就需要用时间戳去计算，记得先调用一次再使用计时器，要不然倒计时不连贯。
时间戳是指 从1970 年 01 月 00 时 00 分 00 秒起到现在的毫秒数， 是一种特殊的计量时间方式
用将来的时间戳减去过去的时间戳等于剩余时间的毫秒数
把结果换成年月日时分秒就是最后的结果了，得出倒计时 1000毫秒就是1s
2.获得时间戳的方式
getTime()方法
能返回指定时间
<body>
<script>
const date = new Date()
console.log(date.getTime())
</script>
</body>+ new Date()方法
能返回指定时间
<body>
<script>
const date = +new Date()
console.log(date)
</script>
</body>Date.now()方法
无需实例化，不能返回指定时间
<body>
<script>
console.log(Date.now())
</script>
</body>
二、节点操作
（一）DOM 节点
DOM 树里每个内容都能称之为一个节点，树上的分支点
1.节点类型
元素节点 （主要）
所有标签：body div 等标签都是节点
html 是根节点·
2.属性节点
比如链接 href
3.文本节点
div 里面的字 各种标签里的字
（二）查找节点
1.父节点查找
通过parentNode 属性来查找，返回最近一级的父亲节点，找不到返回 null
下面返回父亲对象（父对象）
<body>
<div class="father">
<div class="son"></div>
</div>
<script>
const son =document.querySelector('.son')
console.log(son.parentNode)
</script>
</body>关闭广告的新写法
通过parentNode来关闭父元素，方便关闭多个广告
<body>
<div class="guanggao">
<div class="box"></div>
</div>
<script>
const box = document.querySelector('.box')
box.addEventListener('click', function () {
this.parentNode.style.display = 'none'
})
</script>
</body>2.子节点查找
通过 childNodes 查找 （不常用）
获得所有子节点 包括文本节点，空格换行，注释节点等
查出来太多没用的了 所以不常用这个。
通过 children 查找
仅获得所有元素节点，返回的是一个伪数组
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<script>
const ul = document.querySelector('ul')
console.log(ul.children)
</script>
</body>
3.兄弟节点查找
上一个兄弟节点查找
nextElementSibling 属性
下一个兄弟节点查找
previousElementSibling 属性
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script>
const l2 = document.querySelector('ul li:nth-child(2)')
console.log(l2.previousElementSibling)
console.log(l2.nextElementSibling)
</script>
</body>（二）节点增加
先创建一个新的节点 然后把新的节点放在指定的元素内部
1.创建节点
document.createElement(‘标签名’)
<body>
<script>
const div = document.createElement('div')
console.log(div)
</script>
</body>
2. 追加节点
要想看到我们新创的节点我们还需要 把这个节点插入到某个父元素中去
插入到父亲最后一个子元素
父元素.appendChild(要插入的元素) 插入是作为父亲最后一个子元素插入的，所以在最后面
<body>
<ul>
<li>我是原生的</li>
</ul>
<script>
const ul = document.querySelector('ul')
const li = document.createElement('li')
li.innerHTML = '我是li'
ul.appendChild(li)
</script>
</body>插入到父亲某个子元素的前面
父元素.insertBefore(要插入的元素, 要插入在谁的前面)
ul.children 返回一个数组 这样就能在第一个前面插入了
<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>循环生成 li 并更改里面的内容
<body>
<div class="box">
<ul class="clearfix">
</ul>
</div>
<script>
data = [{}, {}]//里面是图片的链接等相关数据
const ul = document.querySelector('.box ul')
for (let i = 0; i < data.length; i++) {
const li = document.createElement('li')
ul.appendChild(li)
li.innerHTML(`
里面复制 li 的内容 并把链接换成自己的
`)
}
</script>
</body>（三）克隆节点
特殊情况下，增加新节点时，先复制一个原有节点，然后把复制的节点放入到指定的元素内部
元素.cloneNode(布尔值)
浅克隆：里面的布尔值 如果是 false 只克隆标签
深克隆：如果是 true 就是被克隆的对象内部有什么都克隆过来。
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
const ul = document.querySelector('ul')
const li1 = ul.children[0].cloneNode(true)
ul.appendChild(li1)
</script>
</body>（四）删除节点
若一个节点在界面中已不需要时可以删除
不能直接删除只能通过父亲删儿子
父元素.removeChild(要删除的元素)
和display：none 的区别:
display 只是在 HTML 中隐藏了 DOM 节点还存在
但是这个是真的删除了
<body>
<ul>
<li>没用了</li>
</ul>
<script>
const ul = document.querySelector('ul')
ul.removeChild(ul.children[0])
</script>
</body>
四、M端事件 （了解）
移动端自己独特的事件
（一）touch ：触屏事件
touchstart ：手指触摸到一个 DOM 元素触发
touchmove： 手指在一个 DOM 元素上滑动时触发
touchend： 手指在一个 DOM 元素上移开时触发
<body>
<div>
</div>
<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>
</body>（二）插件地址
先下载然后把css 和 javascript 文件夹拖入到我们项目文件夹下，然后分别引入 css 和 js 文件夹
<link rel = 'stylesheet' href=''>
和 <script src=''></script>
先查看我们想要的样式 然后预览一下 右键查看源代码 然后把对应的部分复制到相应的地方。
练习：倒计时练习
界面展示：
代码部分：
<!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>
<style>
div {
width: 200px;
height: 50px;
background-color: pink;
}
</style>
<body>
<div>
<span class="hour"></span>
<span class="minutes"></span>
<span class="scond"></span>
</div>
<script>
function getTime(){
const now = +new Date()
const last = +new Date('2024-3-24 18:30:00')
const count = (last - now) / 1000
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
const hour = document.querySelector('.hour')
const minutes = document.querySelector('.minutes')
const scond = document.querySelector('.scond')
hour.innerHTML = h
minutes.innerHTML = m
scond.innerHTML = s
}
getTime()
setInterval(getTime,1000)
</script>
</body>
</html>练习：学生信息表
页面展示：
代码部分：
<!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>
<style>
* {
margin: 0;
padding: 0;
}
li {
float: left;
list-style: none;
margin-left: 10px;
}
ul li:first-child {
margin-left: 0;
}
.header {
width: 80%;
height: 50px;
margin: 0 auto;
background-color: red;
}
.bottom {
width: 80%;
margin: 0 auto;
background-color: gray;
}
input {
width: 60px;
}
h3 {
text-align: center;
}
tbody {
width: 100%;
}
table {
width: 100%;
}
tr {
width: 100%;
}
th {
padding: 0 20px;
text-align: center;
}
tr {
padding: 0 20px;
text-align: center;
}
</style>
<body>
<form class="info">
<div class="header">
<h3>新增学员</h3>
<div class="limian">
<ul>
<li>姓名: <input type="text" class="uname" name="uname"></li>
<li>年龄: <input type="text" class="age" name="age"></li>
<li>性别:
<select class="gender" name="gender" name="gender">
<option>男</option>
<option>女</option>
</select>
</li>
<li>薪资: <input type="text" class="salary" name="salary"></li>
<li>就业城市:
<select class="city" name="city">
<option>北京</option>
<option>南京</option>
</select>
</li>
<li><button>录入</button></li>
</ul>
</div>
</div>
</form>
<div class="bottom">
<h3>就业榜</h3>
<div class="xiamian">
<table class="tab">
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>薪资</th>
<th>就业城市</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<!-- <tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><a href="javascript:">删除</a></td>
</tr> -->
</tbody>
</table>
</div>
</div>
<script>
const arr = []
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 info = document.querySelector('.info')
const tbody = document.querySelector('tbody')
const items = document.querySelectorAll('[name]')
info.addEventListener('submit', function (e) {
e.preventDefault()
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()
rander()
})
function rander() {
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)
console.log(arr)
rander()
}
})
</script>
</body>
</html>
1516
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
