一、日期对象
1.日期对象:用来表示
日期和时间的对象
2.作用:可以得到
当前系统日期和时间
3.Date是JavaScript
内置对象
4.日期对象使用必须先
实例化
:创建一个日期对象并获取时间 ;在代码中发现了
new
关键字时,一般将这个操作称为
实例化
5.语法:
(1)const date = new Date() 获取当前时间
(2)const date = new Date('2088-08-08 08:08:56') 获取指定时间
案例展示:
<!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>获取时间</title>
<style>
div {
height: 40px;
width: 250px;
border: 1px dashed gray;
line-height: 40px;
padding-left: 20px;
color: red;
}
</style>
</head>
<body>
<div></div>
<script>
// const d = new Date('2088-08-08 08:08:56')
// 页面打开默认渲染一次
const d = new Date()
// d.toLocaleString() 年/月/日 时:分:秒
// d.toLocaleDateString() 年/月/日
// d.toLocaleTimeString() 时:分:秒
document.querySelector('div').innerHTML = d.toLocaleString()
// 每隔一秒获取最新的日期后渲染一次
setInterval(function() {
const d = new Date()
document.querySelector('div').innerHTML = d.toLocaleString()
}, 1000)
</script>
</body>
</html>
效果展示:
6.格式化日期对象:
二、时间戳
1.什么是时间戳: 是指1970年01月01日00时00分00秒起至现在的总毫秒数(数字型),它是一种特殊的计量时间的方式
2.
使用场景:
计算
倒计时
效果,需要借助于时间戳完成
3.算法:
(1)将来的时间戳 - 现在的时间戳 =
剩余时间毫秒数
(2)剩余时间毫秒数
转换
为
年月日时分秒
就是倒计时时间
4.三种方式获取时间戳:
案例分享:
距离自己生日的倒计时:
分析:
①:核心: 使用
将来的时间戳减去现在的时间戳
,封装函数
getTimer
②:把剩余的时间戳
转换
为
时
、
分
、
秒
③:把计算
时分秒
写到对应
span
盒子里面
④: 添加
定时器
效果自动变化时间
注意:
1. 通过时间戳得到是毫秒,需要
转换为秒
在计算
2. 转换公式:
h = parseInt(总秒数/ 60/60 %24) // 计算小时
m = parseInt(总秒数 /60 %60 ) // 计算分数
s = parseInt(总秒数%60) // 计算当前秒数
<!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>自己生日的倒计时</title>
<style>
.countdown {
width: 400px;
height: 500px;
text-align: center;
line-height: 1;
color: #fff;
background-color: brown;
/* background-size: 240px; */
/* float: left; */
overflow: hidden;
margin: 100px auto;
}
.countdown .next {
font-size: 20px;
margin: 25px 0 14px;
}
.countdown .title {
font-size: 32px;
font-weight: 600;
}
.countdown .tips {
margin-top: 100px;
font-size: 18px;
font-weight: 600;
}
.countdown .tips2 {
margin-top: 20px;
text-align: center;
font-size: 16px;
}
.countdown small {
font-size: 18px;
}
.countdown .clock {
width: 350px;
margin: 50px auto 0;
overflow: hidden;
}
.countdown .clock span,
.countdown .clock i {
display: block;
text-align: center;
line-height: 80px;
font-size: 25px;
float: left;
}
.countdown .clock span {
width: 100px;
height: 80px;
border-radius: 2px;
background-color: #303430;
}
.countdown .clock i {
width: 20px;
font-style: normal;
}
</style>
</head>
<body>
<div class="countdown">
<p class="next">今天是2023年3月28日</p>
<p class="title">小淳今年生日倒计时</p>
<p class="clock">
<span id="hour">00</span>
<i>:</i>
<span id="minutes">25</span>
<i>:</i>
<span id="second">20</span>
</p>
<p class="tips">2023年10月14日 小淳破壳日快乐</p>
<p class="tips2">努力经营当下,直至未来明朗,加油!</p>
</div>
<script>
// 1.获取三个span
const hour = document.querySelector('#hour')
const minutes = document.querySelector('#minutes')
const second = document.querySelector('#second')
// 2.封装函数,方便下次调用
function getTimer() {
// 1.获取当前和未来的时间,两者相减得出差值
const ms = +new Date('2023-10-14 00:00:00') - +new Date()
// 2.将两者的差值转换成时分秒
let h = parseInt(ms / 1000 / 60 / 60 )
h = h < 10 ? '0' + h : h
let m = parseInt(ms / 1000 / 60 % 60)
m = m < 10 ? '0' + m : m
let s = parseInt(ms / 1000 % 60)
s = s < 10 ? '0' + s : s
console.log(h , m , s);
hour.innerHTML = h
minutes.innerHTML = m
second.innerHTML = s
}
getTimer()
// 使用定时器完成更新
setInterval(getTimer , 1000)
</script>
</body>
</html>
效果展示:
三、节点操作
1.DOM树:
DOM 将
HTML
文档以
树状结构
直观的表现出来,我们称之为
DOM 树
或者
节点树
2.节点(
Node)
是DOM树(节点树)中的单个点。包括文档本身、
元素
、文本以及注释都属于是节点
3.1元素节点(重点)
(1)所有的标签 :比如 body、 div ;html 是根节点
(2)属性节点 :所有的属性 比如 href
(3)文本节点 :所有的文本
(4)学习节点有什么好处?
利用节点关系可以更好的操作元素(比如查询更方便)
3.2 查找节点
查找节点:利用
节点关系
查找节点,返回的都是
对象;
有了查找节点可以使我们
选择元素
更加方便
(1)父节点:子元素.
parentNode 返回最近一级的
父节点对象, 找不到返回为
null
(2)子节点:
节点对象.children l
获得所有
子元素节点,
返回的是一个
伪数组
(3)兄弟节点:
下一个兄弟:
节点对象.
nextElementSibling
该属性获取节点的
下一个兄弟
节点
上一个兄弟:
节点对象.previousElementSibling
该属性获取节点的
上一个兄弟节点
案例分享:
<!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>查询子节点</title>
</head>
<body>
<p>我是 ul 前面的 p</p>
<ul>
<li>我是第1个li</li>
<li>我是第2个li</li>
<li>我是第3个li</li>
<li>我是第4个li</li>
<li>我是第5个li</li>
</ul>
<div>我是 ul 后面的 div</div>
<script>
const ul = document.querySelector('ul')
// const lis = document.querySelectorAll('li')
// console.log(lis)
// 获取 ul 的所有子元素
console.log(ul.children)
// 获取兄弟元素
// ul 的上一个兄弟元素
console.log(ul.previousElementSibling)
// ul 的下一个兄弟元素
console.log(ul.nextElementSibling)
</script>
</body>
</html>
3.3 增加节点
1.新增节点:
很多情况下,我们需要在页面中
增加元素 ;
比如,点击发布按钮,可以新增一条信息 ;一般情况下,我们新增节点,按照如下操作:
(1)创建
一个
新
的
节点 ;
即创造出一个新的网页元素
document.createElement('新增的节点的标签名')
(2)然后
把创建的新的节点
放入
到指定的
元素内部
2.追加节点
要想在界面看到,还得插入到某个父元素中
(1)父元素
最后一个子节点之后
,插入节点元素 :
element
.
append
()
(2)父元素
第一个子元素的之前,
插入节点元素 :
element
.
prepend
()
案例分享:
<!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>插入节点</title>
</head>
<body>
<ul>
<li>我是原本存在的 li</li>
</ul>
<script>
const ul = document.querySelector('ul')
// ul.innerHTML = `<li>我是原本存在的 li</li><li>我是新来的 li</li>`
// 插入子节点
// 1. 新建
const li = document.createElement('li')
li.innerText = '你好哇, 我是新来的'
// 2. 插入
// 父节点.append() 在后面插入
// ul.append(li)
// 父节点.prepend() 在前面插入
ul.prepend(li)
</script>
</body>
</html>
效果展示:
3.3 删除节点
若一个节点在页面中已不需要时,可以删除它
语法:
element
.
remove
()
(1)把对象从它所属的
DOM 树中删除
(2)删除节点(
element
.
remove
()
)和隐藏节点(display:none) 有区别的:
隐藏节点还是存在的
,但是删除,则从
DOM树中删除
<!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>删除节点</title>
</head>
<body>
<div>我会被隐藏</div>
<div>我会被删除</div>
<script>
const divs = document.querySelectorAll('div')
// console.log(divs)
divs[0].style.display = 'none'
// 自杀, 自己干掉自己, 从 DOM 树上移除掉
divs[1].remove()
</script>
</body>
</html>
四、移动端触摸事件
1.M端(移动端)有自己独特的地方。比如
触屏事件 touch
(也称触摸事件),Android 和 IOS 都有。
2.touch 对象代表一个触摸点。触摸点可能是一根手指,也可能是一根触摸笔。触屏事件可响应用户手指(或触控笔)对 屏幕或者触控板操作。
代码分享:
<!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>移动端触摸事件</title>
<style>
div {
width: 200px;
height: 200px;
background-color: yellow;
}
</style>
</head>
<body>
<div></div>
<script>
const div = document.querySelector('div')
// 触摸事件
// touchstart
div.addEventListener('touchstart', function() {
console.log('我开始被摸了', +new Date())
})
// touchmove
div.addEventListener('touchmove', function() {
console.log('我被摸来摸去的')
})
// touchend
div.addEventListener('touchend', function() {
console.log('我结束被摸了', +new Date())
})
</script>
</body>
</html>
效果展示: