前言
分享几款JS实现的在线罗盘时钟应用，代码简洁好摘，可以学习参考，可以应用到自己的项目里！
项目演示
罗盘时钟样式1
罗盘时钟样式2
罗盘时钟样式3
源码下载地址
罗盘时钟样式1：
百度网盘链接：https://pan.baidu.com/s/1V_AZw4M5jCIWKy91QDvN0A
提取码：xion
罗盘时钟样式2：
百度网盘链接：https://pan.baidu.com/s/1nqINmAQ6KkXVeZAprvpPSw
提取码：xion
罗盘时钟样式3：
百度网盘链接：https://pan.baidu.com/s/1RuOD2cqNVnJAv_33jt1p-w
提取码：xion
展示一下第一种罗盘时钟的代码
HTML
<div id="wrap"> <div class="wrap_inner"> <div class="timeout"></div> <div class="timeout"></div> <div class="timeout"></div> <div class="timeout"></div> <div class="timeout"></div> <div class="timeout"></div> </div> <div class="zhizhen"></div> </div>
CSS
* { margin:0; padding:0; } #wrap { position:fixed; left:0; top:300px; width:800px; height:800px; border:1px solid #000; position:fixed; left:0; top:0; color:gold; font-size:14px; position:relative; background:#000; line-height:20px; } #wrap .wrap_inner { width:800px; height:800px; background:#000; position:relative; border-radius:50%; } #wrap .wrap_inner .timeout { width:800px; height:800px; position:absolute; background:transparent; } #wrap .wrap_inner .timeout:nth-of-type(1) { transition:1s linear; box-shadow:0 0 20px gold; border-radius:50%; } #wrap .wrap_inner .timeout:nth-of-type(2) { width:600px; height:600px; left:100px; top:100px; transition:1s linear; } #wrap .wrap_inner .timeout:nth-of-type(3) { width:400px; height:400px; left:200px; top:200px; transition:1s linear; } #wrap .wrap_inner .timeout:nth-of-type(4) { width:300px; height:300px; left:250px; top:250px; transition:1s linear; } #wrap .wrap_inner .timeout:nth-of-type(5) { width:200px; height:200px; left:300px; top:300px; transition:1s linear; } #wrap .wrap_inner .timeout .secbox { width:400px; height:20px; position:absolute; left:400px; top:390px; transform-origin:left center; } #wrap .wrap_inner .timeout .minbox { width:300px; height:20px; position:absolute; left:300px; top:290px; transform-origin:left center; } #wrap .wrap_inner .timeout .houbox { width:200px; height:20px; position:absolute; left:200px; top:190px; transform-origin:left center; } #wrap .wrap_inner .timeout .datbox { width:150px; height:20px; position:absolute; left:150px; top:140px; transform-origin:left center; } #wrap .wrap_inner .timeout .daybox { width:100px; height:20px; position:absolute; left:100px; top:90px; transform-origin:left center; } #wrap .zhizhen { width:400px; height:20px; background:rgba(255,255,255,.4); position:absolute; left:400px; top:390px; z-index:999; }
JS
var Months = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']; var Days = ['一号', '二号', '三号', '四号', '五号', '六号', '七号', '八号', '九号', '十号', '十一号', '十二号', '十三号', '十四号', '十五号', '十六号', '十七号', '十八号', '十九号', '二十号', '二十一号', '二十二号', '二十三号', '二十四号', '二十五号', '二十六号', '二十七号', '二十八号', '二十九号', '三十号', '三十一号']; var Dates = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日']; var Hours = ['零点', '一点', '二点', '三点', '四点', '五点', '六点', '七点', '八点', '九点', '十点', '十一点', '十二点', '十三点', '十四点', '十五点', '十六点', '十七点', '十八点', '十九点', '二十点', '二十一点', '二十二点', '二十三点']; var Minutes = ['一分', '二分', '三分', '四分', '五分', '六分', '七分', '八分', '九分', '十分', '十一分', '十二分', '十三分', '十四分', '十五分', '十六分', '十七分', '十八分', '十九分', '二十分', '二十一分', '二十二分', '二十三分', '二十四分', '二十五分', '二十六分', '二十七分', '二十八分', '二十九分', '三十分', '三十一分', '三十二分', '三十三分', '三十四分', '三十五分', '三十六分', '三十七分', '三十八分', '三十九分', '四十分', '四十一分', '四十二分', '四十三分', '四十四分', '四十五分', '四十六分', '四十七分', '四十八分', '四十九分', '五十分', '五十一分', '五十二分', '五十三分', '五十四分', '五十五分', '五十六分', '五十七分', '五十八分', '五十九分', '六十分']; var Second = ['一秒', '二秒', '三秒', '四秒', '五秒', '六秒', '七秒', '八秒', '九秒', '十秒', '十一秒', '十二秒', '十三秒', '十四秒', '十五秒', '十六秒', '十七秒', '十八秒', '十九秒', '二十秒', '二十一秒', '二十二秒', '二十三秒', '二十四秒', '二十五秒', '二十六秒', '二十七秒', '二十八秒', '二十九秒', '三十秒', '三十一秒', '三十二秒', '三十三秒', '三十四秒', '三十五秒', '三十六秒', '三十七秒', '三十八秒', '三十九秒', '四十秒', '四十一秒', '四十二秒', '四十三秒', '四十四秒', '四十五秒', '四十六秒', '四十七秒', '四十八秒', '四十九秒', '五十秒', '五十一秒', '五十二秒', '五十三秒', '五十四秒', '五十五秒', '五十六秒', '五十七秒', '五十八秒', '五十九秒', '六十秒']; var Otimeout = document.querySelectorAll('.timeout'); var date = new Date(); var month = date.getMonth() + 1; var data = date.getDate(); var day = date.getDay(); var hours = date.getHours(); var minutes = date.getMinutes(); var seconds = date.getSeconds(); console.log(day) console.log(data) var nowsecond = 'rotate(' + -6 * (seconds - 1) + 'deg)' Otimeout[0].style.transform = nowsecond; var nowminutes = 'rotate(' + -6 * (minutes - 1) + 'deg)' Otimeout[1].style.transform = nowminutes; var nowhours = 'rotate(' + -15 * (hours) + 'deg)' Otimeout[2].style.transform = nowhours; var nowday = 'rotate(' + -51.4 * (day - 1) + 'deg)' Otimeout[3].style.transform = nowday; var nowdata = 'rotate(' + -11.6 * (data - 1) + 'deg)' Otimeout[4].style.transform = nowdata; (function() { //秒 for (var i = 0; i < 60; i++) { var secbox = document.createElement('div'); secbox.className = 'secbox' var Rotate = 'rotate(' + 6 * i + 'deg)' // console.log(Rotate) secbox.style.transform = Rotate secbox.innerText = Second[i] secbox.style.textAlign = 'right' Otimeout[0].appendChild(secbox); } //分 for (var i = 0; i < 60; i++) { var minbox = document.createElement('div'); minbox.className = 'minbox' var Rotate = 'rotate(' + 6 * i + 'deg)' // console.log(Rotate) minbox.style.transform = Rotate minbox.innerText = Minutes[i] minbox.style.textAlign = 'right' Otimeout[1].appendChild(minbox); } //时 for (var i = 0; i < 24; i++) { var houbox = document.createElement('div'); houbox.className = 'houbox' var Rotate = 'rotate(' + 15 * i + 'deg)' // console.log(Rotate) houbox.style.transform = Rotate houbox.innerText = Hours[i] houbox.style.textAlign = 'right' // houbox.style.textIndent = '1em' Otimeout[2].appendChild(houbox); } //星期 for (var i = 0; i < 7; i++) { var datbox = document.createElement('div'); datbox.className = 'datbox' var Rotate = 'rotate(' + 51.4 * i + 'deg)' // console.log(Rotate) datbox.style.transform = Rotate datbox.innerText = Dates[i] datbox.style.textAlign = 'right' Otimeout[3].appendChild(datbox); } //天 for (var i = 0; i < 31; i++) { var daybox = document.createElement('div'); daybox.className = 'daybox' var Rotate = 'rotate(' + 11.6 * i + 'deg)' // console.log(Rotate) daybox.style.transform = Rotate daybox.innerText = Days[i] daybox.style.textAlign = 'right' Otimeout[4].appendChild(daybox); } (function() { var count = seconds - 1; var con = minutes - 1; var cos = hours - 2; var timer = setInterval(function() { count++ var rotate = 'rotate(' + -6 * count + 'deg)' Otimeout[0].style.transform = rotate if (count % 60 == 0) { con++; var rotate1 = 'rotate(' + -6 * con + 'deg)' Otimeout[1].style.transform = rotate1 if (con % 60 == 0) { cos++; var rotate2 = 'rotate(' + -15 * cos + 'deg)' Otimeout[2].style.transform = rotate2 } } }, 1000) })(); })() function $(id) { return document.querySelector(id) }
