本文主要是介绍时钟转动，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
今天我们来学习一下如何使时钟转动起来的效果。
首先，我们先来欣赏一下效果图。
时钟转动
看起来效果是不是很炫酷啊！
接下来展示我们的分析思路（该制图软件为XMind）。
时钟转动思路图
最后放上我们的程序代码！
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>时钟转动</title><style>.hours {position: absolute;padding: 0;width: 500px;height: 500px;}.h {position: absolute;}</style></head><body><div class="hours"><div class="h">1</div><div class="h">2</div><div class="h">3</div><div class="h">4</div><div class="h">5</div><div class="h">6</div><div class="h">7</div><div class="h">8</div><div class="h">9</div><div class="h">10</div><div class="h">11</div><div class="h">12</div></div><script>var hs = document.querySelectorAll(".hours .h");for (var i = 0; i < hs.length; i++) {hs[i].style.left = 250 + Math.cos(Math.PI / 180 * 30 * i) * 200 + "px";// hs[i]的x位置 = 300中心点+Math.cos(该元素所应该的弧度角)*200半径hs[i].style.top = 250 + Math.sin(Math.PI / 180 * 30 * i) * 200 + "px";hs[i].style.transform = `rotate(${30*i}deg)`;}var hours = document.querySelector(".hours");var inter = 0;setInterval(() => {inter += 1;hours.style.transform = `rotate(${inter}deg)`;}, 166.7)// 60s 转360°// 1 转6°</script></body>
</html>
好了，今天的分享就到这里了！
愿你三冬暖，愿你春不寒；愿你天黑有灯，下雨有伞。
小晴天
这篇关于时钟转动的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
