罗盘时钟_罗盘时钟代码资源-CSDN文库

共2个文件

html：1个

js：1个

html

需积分: 50 2 浏览量 2021-03-26 13:00:46 上传评论收藏 36KB ZIP 举报

资源详情

资源评论

资源推荐

收起资源包目录

罗盘时钟.zip （2个子文件）

jquery.min.js 91KB

时钟二.html 18KB

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script> </head> <style> * { margin: 0; padding: 0; } body { font-size: 12px; color: #fff; background: #000; transition: 2s; } .datatime { position: relative; height: 860px; width: 860px; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); } .Y { display: none; position: relative; width: 100px; height: 100px; line-height: 100px; text-align: center; position: absolute; left: 380px; top: 380px; color: #ff0000; transition: 1s; z-index: 9999; font-weight: bold; } .Y::after { content: ''; position: absolute; top: 65px; left: 10px; right: -430px; height: 1px; background: #fff; transition: 1s; z-index: -1; } .Y::before { content: ''; position: absolute; top: 63px; left: 8px; width: 5px; height: 5px; border-radius: 50%; background: #fff; transition: 1s; } .M { position: absolute; width: 160px; height: 160px; z-index: 999; left: 350px; top: 350px; transition: 1s; /* background: rgb(58, 49, 49); */ position: relative; } .D { position: absolute; width: 300px; height: 300px; z-index: 999; left: 280px; top: 280px; transition: 1s; } .h { position: absolute; width: 570px; height: 570px; z-index: 999; left: 145px; top: 145px; transition: 1s; } .m { position: absolute; width: 700px; height: 700px; z-index: 999; transition: 1s; left: 80px; top: 80px; } .s { position: absolute; width: 860px; height: 860px; left: 0; top: 0; transition: 0.1s; z-index: 999; z-index: 999; } .bg { position: absolute; width: 450px; height: 450px; z-index: 2; left: 205px; top: 205px; transition: 1s; } span { position: absolute; width: 50%; height: 100%; } label { transform: rotate(0deg); display: inline-block; width: 860px; height: 860px; } </style> <body> <div> <div class="datatime" data-id="1"> <label for=""> <div class="Y" style="transform:rotate(0deg)"></div> <div class="M" style="transform:rotate(0deg)"></div> <div class="D" style="transform:rotate(0deg)"></div> <div class="h" style="transform:rotate(0deg)"></div> <div class="m" style="transform:rotate(0deg)"></div> <div class="s" style="transform:rotate(0deg)"></div> <div class="bg" style="transform:rotate(0deg)"></div> </label> </div> </div> <script> var dataM = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'] var dataD = ['一号', '二号', '三号', '四号', '五号', '六号', '七号', '八号', '九号', '十号', '十一号', '十二号', '十三号', '十四号', '十五号', '十六号', '十七号', '十八号', '十九号', '二十号', '二十一号', '二十二号', '二十三号', '二十四号', '二十五号', '二十六号', '二十七号', '二十八号', '二十九号', '三十号', '三十一号'] var datah = ['十二点', '一点', '二点', '三点', '四点', '五点', '六点', '七点', '八点', '九点', '十点', '十一点',] var datam = ['一分', '二分', '三分', '四分', '五分', '六分', '七分', '八分', '九分', '十分', '十一分', '十二分', '十三分', '十四分', '十五分', '十六分', '十七分', '十八分', '十九分', '二十分', '二十一分', '二十二分', '二十三分', '二十四分', '二十五分', '二十六分', '二十七分', '二十八分', '二十九分', '三十分', '三十一分', '三十二分', '三十三分', '三十四分', '三十五分', '三十六分', '三十七分', '三十八分', '三十九分', '四十分', '四十一分', '四十二分', '四十三分', '四十四分', '四十五分', '四十六分', '四十七分', '四十八分', '四十九分', '五十分', '五十一分', '五十二分', '五十三分', '五十四分', '五十五分', '五十六分', '五十七分', '五十八分', '五十九分', '六十分',] var datas = ['一秒', '二秒', '三秒', '四秒', '五秒', '六秒', '七秒', '八秒', '九秒', '十秒', '十一秒', '十二秒', '十三秒', '十四秒', '十五秒', '十六秒', '十七秒', '十八秒', '十九秒', '二十秒', '二十一秒', '二十二秒', '二十三秒', '二十四秒', '二十五秒', '二十六秒', '二十七秒', '二十八秒', '二十九秒', '三十秒', '三十一秒', '三十二秒', '三十三秒', '三十四秒', '三十五秒', '三十六秒', '三十七秒', '三十八秒', '三十九秒', '四十秒', '四十一秒', '四十二秒', '四十三秒', '四十四秒', '四十五秒', '四十六秒', '四十七秒', '四十八秒', '四十九秒', '五十秒', '五十一秒', '五十二秒', '五十三秒', '五十四秒', '五十五秒', '五十六秒', '五十七秒', '五十八秒', '五十九秒', '六十秒',] var bg = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'] var datay = '' var html = '' var color = true var myDate = new Date(); var d = new Date(myDate.getFullYear(), myDate.getMonth() + 1, 0); var days = d.getDate(); html = '' var lengths = 0 switch (days) { case 28: dataD.length = 28 lengths = 360 / 28 break; case 29: dataD.length = 29 lengths = 360 / 29 break; case 30: dataD.length = 30 lengths = 360 / 30 break; case 31: lengths = 360 / 31 break; } setTimeout(() => { var index6 = 0 var param = setInterval(() => { console.log(index6) if (index6 < dataM.length) { if (index6 == 0) { $('.M').append('<span " style="transform: rotate(0deg)translateX(50%);line-height: 160px;;padding-left:50%">' + dataM[index6] + '</span>') } else { $('.M').append('<span " style="transform: rotate(' + index6 * 30 + 'deg)translateX(50%);line-height: 160px;;padding-left:50%">' + dataM[index6] + '</span>') } index6++ } else { clearInterval(param) } }, 100) }, 100); setTimeout(() => { var index5 = 0 var param = setInterval(() => { if (index5 < dataD.length) { if (index5 == 0) { $('.D').append('<span " style="transform: rotate(0deg)tr