js 简单圆盘时钟

实现一个简单的圆盘时钟

预览图：

代码：

css：

<style>.disc {position: relative;margin: 200px auto;width: 300px;height: 300px;border: 1px solid #000;border-radius: 50%;}.axis {position: absolute;top: 150px;left: 150px;transform: translate(-50%, -50%);width: 10px;height: 10px;border-radius: 50%;background-color: #000;}.hourHand {position: absolute;top: 150px;left: 147px;width: 6px;height: 80px;background-color: #000;transform-origin: 3px 0;}.minuteHand {position: absolute;top: 150px;left: 148px;width: 4px;height: 110px;background-color: #000;transform-origin: 2px 0;}.secondHand {position: absolute;top: 150px;left: 149px;width: 2px;height: 130px;background-color: #000;transform-origin: 1px 0;}.scale {position: absolute;top: 0;left: 150px;transform-origin: 2.5px 150px;width: 2px;height: 5px;background-color: #000;}.num {position: absolute;top: 15px;left: 150px;width: 20px;height: 20px;color: 16px;text-align: center;line-height: 20px;transform-origin: 50% 135px;}.num span {display: block;transform-origin: 50% 50%;}</style>

html：

	 <div class="disc"><div class="axis"></div><div class="hourHand"></div><div class="minuteHand"></div><div class="secondHand"></div></div>

js：

	 // 获取元素var disc = document.getElementsByClassName('disc')[0];var hourHand = document.getElementsByClassName('hourHand')[0];var minuteHand = document.getElementsByClassName('minuteHand')[0];var secondHand = document.getElementsByClassName('secondHand')[0];var scale = document.getElementsByClassName('scale');// 生成刻度for (var i = 0; i < 60; i++) {var scale = document.createElement('div');scale.classList.add('scale');scale.style.transform = `translate(-50%) rotate(${i*6}deg)`;disc.appendChild(scale);scale.style.transform = `translate(-50%) rotate(${i*6}deg)`;if (i % 5 === 0) {scale.style.width = 4 + 'px';scale.style.height = 12 + 'px';}}// 生成数字for (var i = 0; i < 12; i++) {var num = document.createElement('div');var numx = document.createElement('span');num.classList.add('num');num.style.transform = `translate(-50%) rotate(${i*30+30}deg)`;numx.style.transform = `rotate(${-i*30-30}deg)`;numx.innerHTML = i + 1;disc.appendChild(num);num.appendChild(numx);}// 浏览器刚打开就显示，不会停顿var h = getTime().hours;h = h > 12 ? h - 12 : h;hourHand.style.transform = `rotate(${h*30-180+(getTime().minute*0.5)}deg)`;minuteHand.style.transform = `rotate(${getTime().minute*6-180}deg)`;secondHand.style.transform = `rotate(${getTime().second*6-180}deg)`;// 定时器，每过一秒执行一次setInterval(function() {var h = getTime().hours;h = h > 12 ? h - 12 : h;hourHand.style.transform = `rotate(${h*30-180+(getTime().minute*0.5)}deg)`;minuteHand.style.transform = `rotate(${getTime().minute*6-180}deg)`;secondHand.style.transform = `rotate(${getTime().second*6-180}deg)`;}, 1000)// 函数：获取时间function getTime() {var date = new Date();var year = date.getFullYear();var month = date.getMonth();month = month < 10 ? '0' + month : month;var day = date.getDate();day = day < 10 ? '0' + day : day;var week = date.getDay();var weeks = ['日', '一', '二', '三', '四', '五', '六'];var weekZn = weeks[week];var hou = date.getHours();hou = hou < 10 ? '0' + hou : hou;var min = date.getMinutes();min = min < 10 ? '0' + min : min;var sec = date.getSeconds();sec = sec < 10 ? '0' + sec : sec;return {year: year,month: month,day: day,week: weekZn,hours: hou,minute: min,second: sec}}