JavaScript实现动态时钟效果

 更新时间:2022年06月07日 16:42:50   作者:​ 肥学   ​  
这篇文章主要介绍了JavaScript实现动态时钟效果,文章围绕主题展开详细的内容介绍,具有一定的参考价值,需要的小伙伴可以参考一下,希望对你的学习有所帮助

脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用

演示

时间是非常有限的,过去时光永远不会再回来。要在有限的时间里面,去面对生活的困难和生存的竞争,是需要强化自我的。而这些强化学习是最需时间的。而人的精力又是非常有限的,能用来做有意义的时间少之又少。所以充分利用好有限的时间,才能面对生活的困难和压力。

配置设计

1
2
3
4
5
6
7
8
9
10
11
var config={
    'language_type':2,
    'font_color':'#dce0f6',
    'pointer_color':'#09f5ea',
    'sound':0,
    'sound_name':'bg.mp3',
    'background_style':1,
    'background_picture':'bg.jpg',
    'background_video':'3.mp4',
    'background_color':'#000000',
}

旋转功能设计

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
setTimeout(function () {
       $(".year span").css("animation","yearRun 1s linear infinite");
       style.insertRule("@keyframes yearRun {0%{transform: rotateZ(0);transform-origin: -"+yearLeft+" "+top+";}100%{transform:rotateZ(720deg);transform-origin: -"+yearLeft+" "+top+";}}",style.rules.length);
       $($(".main-content .second span")[0]).removeClass("current");
       $(".second span").each(function(index,element){
           $(element).css("animation","secondRun"+index+" 1s linear infinite");
           style.insertRule("@keyframes secondRun"+index+" {0%{transform: rotateZ(0);transform-origin: -"+secondLeft+" "+top+";}100%{transform:rotateZ("+((index+1)*720)+"deg);transform-origin: -"+secondLeft+" "+top+";}}",style.rules.length);
            
       });
       $($(".main-content .minute span")[0]).removeClass("current");
       $(".minute span").each(function(index,element){
           $(element).css("animation","minuteRun"+index+" 1s linear infinite");
           style.insertRule("@keyframes minuteRun"+index+" {0%{transform: rotateZ(0);transform-origin: -"+minuteLeft+" "+top+";}100%{transform:rotateZ("+((index+1)*720)+"deg);transform-origin: -"+minuteLeft+" "+top+";}}",style.rules.length);
           
       });
       $($(".main-content .hour span")[0]).removeClass("current");
       $(".hour span").each(function(index,element){
           $(element).css("animation","hourRun"+index+" 1s linear infinite");
           style.insertRule("@keyframes hourRun"+index+" {0%{transform: rotateZ(0);transform-origin: -"+hourLeft+" "+top+";}100%{transform:rotateZ("+((index+1)*720)+"deg);transform-origin: -"+hourLeft+" "+top+";}}",style.rules.length);
           
       });
 
       $($(".main-content .shichen span")[0]).removeClass("current");
       $(".shichen span").each(function(index,element){
           $(element).css("animation","shichenRun"+index+" 1s linear infinite");
           style.insertRule("@keyframes shichenRun"+index+" {0%{transform: rotateZ(0);transform-origin: -"+shichenLeft+" "+top+";}100%{transform:rotateZ("+((index+1)*720)+"deg);transform-origin: -"+shichenLeft+" "+top+";}}",style.rules.length);
            
       });
 
       $($(".main-content .week span")[0]).removeClass("current");
       $(".week span").each(function(index,element){
           $(element).css("animation","weekRun"+index+" 1s linear infinite");
           style.insertRule("@keyframes weekRun"+index+" {0%{transform: rotateZ(0);transform-origin: -"+weekLeft+" "+top+";}100%{transform:rotateZ("+((index+1)*720)+"deg);transform-origin: -"+weekLeft+" "+top+";}}",style.rules.length);
            
       });
       $($(".main-content .day span")[0]).removeClass("current");
       $(".day span").each(function(index,element){
           $(element).css("animation","dayRun"+index+" 1s linear infinite");
           style.insertRule("@keyframes dayRun"+index+" {0%{transform: rotateZ(0);transform-origin: -"+dayLeft+" "+top+";}100%{transform:rotateZ("+((index+1)*720)+"deg);transform-origin: -"+dayLeft+" "+top+";}}",style.rules.length);
            
       });
       $($(".main-content .month span")[0]).removeClass("current");
       $(".month span").each(function(index,element){
           $(element).css("animation","monthRun"+index+" 1s linear infinite");
           style.insertRule("@keyframes monthRun"+index+" {0%{transform: rotateZ(0);transform-origin: -"+monthLeft+" "+top+";}100%{transform:rotateZ("+((index+1)*720)+"deg);transform-origin: -"+monthLeft+" "+top+";}}",style.rules.length);
       });
   }, 7000);

更新每日

至于每秒每小时都差不多

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$(".day").html("");
           Time.days=updateDays(type,year,month,1);
           Time.currentTime.day=getFirstDay(type);
           $(".main-content .day").append("<span class='current'>"+Time.currentTime.day+Time.dayUnit+"</span>");
           for (const key in Time.days) {
               if (Time.days.hasOwnProperty(key)) {
                   const element = Time.days[key];
                   if(element!=Time.currentTime.day){
                       $(".main-content .day").append("<span>"+element+Time.dayUnit+"</span>");
                   }
                    
               }
                
           }
           $(".day span").each(function(index,element){
               $(element).css("animation","day"+index+" 0.5s linear");
               $(element).css("animation-fill-mode","forwards");
               style.insertRule("@keyframes day"+index+"{0%{transform: rotateZ(0);transform-origin: -"+dayLeft+" "+top+";}100%{transform:rotateZ("+-(360/Time.days.length)*(index+1)+"deg);transform-origin: -"+dayLeft+" "+top+";}}",style.rules.length);
           });

到此这篇关于JavaScript实现动态时钟效果的文章就介绍到这了,更多相关js动态时钟内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

蓄力AI

微信公众号搜索 “ 脚本之家 ” ,选择关注

程序猿的那些事、送书等活动等着你

原文链接:https://juejin.cn/post/7102939166811357221

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!

相关文章

最新评论