js实现简单圆盘时钟 js实现简单圆盘时钟

本文实例为大家分享了js实现简单圆盘时钟的具体代码，供大家参考，具体内容如下
预览图：

文章图片

代码：
css：

.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%; }

html：

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}}

更多JavaScript时钟特效点击查看：JavaScript时钟特效专题
【js实现简单圆盘时钟】以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。