【JS】小白都能看懂的html+js动态时钟效果

不同于其他篇目的是，此次既没有用到三角函数，也没有用到canvas，非常适合自学前端的小白！不过前提是你需要掌握transform、定时器和Date对象。

先来看下效果吧！

首先是html，代码如下：

<divclass="wrap">
<ulid="list"></ul><!-- 刻度容器 -->
<ulid="nub"></ul><!-- 数字容器 -->
<divclass="dot"></div><!-- 中心圆点 -->
<divclass="hour-hand hand"></div><!-- 时针 -->
<divclass="min-hand hand"></div><!-- 分针 -->
<divclass="sec-hand hand"></div><!-- 秒针 -->
</div>

然后是css：

.wrap{
width: 500px;
height: 500px;
border: 1px solid #000;
border-radius: 50%;
margin: 20px auto;
position: relative;
}
ul{
margin: 0;
padding: 0;
list-style: none;
position: relative;
}
#list li{
width: 2px;
height: 10px;
background-color: #000;
position: absolute;
left:249px;
top: 0;
transform-origin: center 250px;
}
#list li:nth-child(5n+1){
height: 20px;
}
.dot{
width: 6px;
height: 6px;
background-color: #000;
border-radius: 50%;
position: absolute;
left: 247px;
top: 247px;
}
.hand{
width: 6px;
position: absolute;
left: 247px;
border-radius: 20px;
transform-origin: bottom;
}
.hour-hand{
height: 100px;
top: 148px;
background-color:rgba(236, 179, 132, 0.76);
}
.min-hand{
height: 150px;
top: 101px;
background-color:rgba(170, 149, 245, 0.801);
}
.sec-hand{
width: 2px;
height: 200px;
left: 249px;
top: 51px;
background-color:rgb(248, 142, 156);
}
#nub li{
position: absolute;
left: 246px;
top: 20px;
transform-origin: center 230px;
}
#nub li span{
display: block;
transform-origin: center center;
}

说明一下：

• 刻度要围绕着中心旋转，所以transform-origin: center 250px;

• 控制时针、分针、秒针 的top值 使它们的底部与圆点重合，所以旋转中心点就设置成bottom。transform-origin: bottom;

生成刻度结构：

(function(){
let list = document.querySelector('#list');
let html ='';
for(let i =0; i <60; i++){
html +=`<litoken interpolation">${i*6}deg)"><li>`
}
list.innerHTML = html;
})();

生成数字结构：

(function(){
let nub = document.querySelector('#nub');
let addNub ='';
for(let i =0; i <12; i++){
addNub +=`<litoken interpolation">${i*30}deg)">
<spantoken interpolation">${-i*30}deg)">
${i?i:12}
</span>
</li>`
}
nub.innerHTML = addNub;
})();

说明一下：

• span当中的数字是0-11，但我们想要的不是0而是12，所以用三目运算处理了一下

时间的处理

(function(){
let hourHand = document.querySelector('.hour-hand');
let minHand = document.querySelector('.min-hand');
let secHand = document.querySelector('.sec-hand');
run();
setInterval(run,1000)
functionrun(){
let date =newDate();
let seconds = date.getSeconds();
let minutes = date.getMinutes()+ seconds /60;
let hours = date.getHours()+ minutes /60;
secHand.style.transform =`rotate(${seconds *6}deg)`;
minHand.style.transform =`rotate(${minutes *6}deg)`;
hourHand.style.transform =`rotate(${hours *30}deg)`;
}
})();

说明一下：

• 观察一下现实当中的钟表你会发现，假如走了半分钟，分针会指在两个小格中间，假如走了半小时，时针会指在两大格之间，所以只拿到时间是不够的，要加上当前秒占一分钟的几分之几还有当前分占一小时的几分之几，然后乘上度数就OK啦！