紧接着昨天的实例,第二个是原生js实现钟表特效。
首先介绍下大致思路,首先要用css把时针分针和秒针画出来。然后根据钟表中,角度和时间的算法关系。
设置角度。
最后使用定时器,每秒运行一次。
需要注意的是,我的算法和之前的算法不一样,这个可以根据自己的想法实现,实现的效果是不一样的。
首先知道钟表是360°,然后根据一个小时30°,来算出各个针的角度。
https://github.com/CookaCooki... 附上gayhub地址
<script>
const secondHand = document.querySelector('.second-hand');
const minsHand = document.querySelector('.min-hand');
const hourHand = document.querySelector('.hour-hand');
function setDate() {
const now = new Date();
const seconds = now.getSeconds();
const secondsDegrees = ((seconds / 60) * 360) + 90;
secondHand.style.transform = `rotate(${secondsDegrees}deg)`;
const mins = now.getMinutes();
const minsDegrees = ((mins / 60) * 360) + ((seconds / 60) * 6) + 90;
minsHand.style.transform = `rotate(${minsDegrees}deg)`;
const hour = now.getHours();
const hourDegrees = ((hour / 12) * 360) + ((mins / 60) * 30) + 90;
hourHand.style.transform = `rotate(${hourDegrees}deg)`;
}
setInterval(setDate, 1000);
setDate();
</script>
最后符上知乎地址 https://zhuanlan.zhihu.com/p/...