【罗盘时钟(星空版)---使用html,js,css编写。(附全部源代码+效果)】

【罗盘时钟(星空版)---使用html,js,css编写。(附全部源代码+效果)】


2024年1月26日发(作者:)

源代码CSDN---追梦者


y{ font-size: 14px;

font-size: 14px; color: #ffffff; font-family: 'Microsoft YaHei', 'Times New Roman', Times, serif; background: url(../image/) no-repeat; padding: 0; margin: 0; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover;

}.clock{ list-style: none; margin: auto; padding: 0; width: 700px; height: 700px; position: fixed; top: 0; right: 0; bottom: 0; left: 0; line-height: 20px; user-select: none;}.clock .date{ position: absolute; z-index: 1; width: 100%; height: 20px; text-align: center; top: 340px; left: 0;}.clock .hour{ position: absolute; z-index: 3; width: 360px; height: 20px; top: 340px; left: 170px; transition: transform 0.3s ease-in-out 0s; transform:rotate(0deg);}.clock .hour>div{ position: absolute; width: 100%; right: 0; top: 0; transition: transform 1s ease-in-out 0s; transform:rotate(0deg);}.clock .hour>div>div{ float: right; width: 60px; text-align: right;}.clock .minute{ position: absolute; z-index: 4; width: 520px; height: 20px; top: 340px; left: 90px;

setTimeout(function () { HL.$(".on-sec>div").each(function (index,el) { $(el).css({ "transform":"rotate("+rotateArr[index]+"deg)" }) }); setTimeout(function () { tate(); },1300); },100); }; /* 初始化滚动位置 */ tate=function(){ Info={ "h":360/24*(-1), "m":360/60*(-1), "s":360/60*(-1), }; ={ "date":this.$(".date"), "hour":this.$(".on-hour"), "minute":this.$(".on-minute"), "sec":this.$(".on-sec") }; ({ "transform":"rotate("+Info.h+"deg)" }); ({ "transform":"rotate("+Info.m+"deg)" }); ({ "transform":"rotate("+Info.s+"deg)" }); setTimeout(function () { HL.$("hr").addClass("active").css({ "width":"49%" }); (); },300); }; /* 启动 */ =function(){ setTimeout(function () { if(<=60){ ++; var r=360/60*(-1); ({ "transform":"rotate("+r+"deg)" }); Add(); (); }else { () } },1000); }; /* 分钟数增加 */ Add=function(){ if(==60+1){ setTimeout(function () { ({ "transform":"rotate(0deg)", "transition-duration": "0s" }); =1; setTimeout(function () {


发布者:admin,转转请注明出处:http://www.yc00.com/web/1706230477a1447461.html

相关推荐

发表回复

评论列表(0条)

  • 暂无评论

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信