一、节点操作
1.1DOM节点
1.2查找节点
1.3增加节点
1.3.1创建节点
1.3.2追加节点
1.3.3克隆节点
1.4删除节点
二、时间对象
2.1 实例化
2.2 时间对象方法
2.3 时间戳
三、重绘和回流
四、圆形钟表-易错
难点:定时器不定时清除会导致时钟秒针直接跳两格,出现偏差,引起原因初步判断为dom操作会有毫秒操作时间,所以需要定时清除,30秒一清除在3分多又会进行偏差,0秒一清除导致1分钟内定时器停止工作,最后10秒钟一清除正常走了2个多小时。
<!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>001实验品</title>
<style>
* {
box-sizing: border-box;
}
.clock {
width: 600px;
height: 600px;
background: url(./images/clock.jpg) no-repeat;
margin: 50px auto 0;
position: relative;
}
.hh,
.mm,
.ss {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: url(./images/hour.png) no-repeat center;
}
.mm {
background-image: url(./images/minute.png);
transform: rotate(270deg);
}
.ss {
background-image: url(./images/second.png);
transform: rotate(30deg);
}
</style>
</head>
<body>
<div class="clock">
<div class="hh" id="h"></div>
<div class="mm" id="m"></div>
<div class="ss" id="s"></div>
</div>
<script>
let hhh=document.querySelector('.hh')
let mmm=document.querySelector('.mm')
let sss=document.querySelector('.ss')
setInterval(function clock(){
let timer=new Date()
let hh=timer.getHours()
let mm=timer.getMinutes()
let ss=timer.getSeconds()
hhh.style.transform=`rotate(${hh*30+mm/60*30}deg)`
mmm.style.transform=`rotate(${mm*6+ss/60*6}deg)`
sss.style.transform=`rotate(${ss*6}deg)`
console.log(ss)
//定时清除计时器,dom操作会占用时间,定时清除使其达不到1s
if(ss===0){
clearInterval(ss)
}else if(ss===10){
clearInterval(ss)
}else if(ss===20){
clearInterval(ss)
}else if(ss===30){
clearInterval(ss)
}else if(ss===40){
clearInterval(ss)
}else if(ss===50){
clearInterval(ss)
}
},1000)
</script>
</body>
</html>