当前位置：首页>科技>源代码制作罗盘时间表自制酷酷罗盘时钟
发布时间：2026-06-18阅读(2)
复制以下代码，到txt文档，保存，后缀改为html。即可。
<!doctype html><html><head><meta charset="utf-8"><title>罗盘时钟</title><script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script><style>* {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;}</style></head><body><div id="wrap"> <div > <div ></div> <div ></div> <div ></div> <div ></div> <div ></div> <div ></div> </div> <div ></div></div><script> 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) }</script></body></html>
如果不行，记得另存为时，编码格式为UTF-8
喜欢就分享给你的小伙伴吧。
Copyright © 2024 有趣生活 All Rights Reserve吉ICP备19000289号-5 TXT地图HTML地图XML地图
