JavaScript实现动态时钟效果

更新时间：2022年06月07日 16:42:50 作者：肥学

这篇文章主要介绍了JavaScript实现动态时钟效果，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下，希望对你的学习有所帮助

演示

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

配置设计

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',
}

旋转功能设计

 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);

更新每日

至于每秒每小时都差不多

 $(".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动态时钟内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

BootStrop前端框架入门教程详解
Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。这篇文章主要介绍了BootStrop前端框架入门教程详,需要的朋友可以参考下
2016-12-12
利用JavaScript实现3D可旋转粒子矩阵效果
dat.gui.js是一个一个轻量级的图形用户界面库，或者说GUI组件，只有几十KB，可以用于创建操作控制三维场景的菜单栏等。本文将利用dat.gui.min.js实现3D可旋转粒子矩阵效果，感兴趣的可以了解一下
2022-06-06
JS简单判断滚动条的滚动方向实现方法
这篇文章主要介绍了JS简单判断滚动条的滚动方向实现方法,涉及javascript针对scrollTop事件的相关操作技巧,需要的朋友可以参考下
2017-04-04
js将多维数组转为一维数组后去重排序
本文主要介绍了js将多维数组转为一维数组后去重排序，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-06-06
微信小程序自定义组件实现多选功能
这篇文章主要为大家详细介绍了微信小程序自定义组件实现多选功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-07-07
非常酷的js图形渐隐导航菜单栏
非常酷的js图形渐隐导航菜单栏...
2007-08-08
JavaScript中的toString()和toLocaleString()方法的区别
本文给大家介绍JavaScript中的toString()和toLocaleString()方法的区别,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2017-02-02
详解html-webpack-plugin插件(用法总结)
这篇文章主要介绍了详解html-webpack-plugin插件(用法总结)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-09-09
详解tween.js的使用教程
本篇文章主要介绍了详解tween.js的使用方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-09-09
详解JavaScript中的before-after-hook钩子函数
最近看别人的代码，接触到一个插件，before-after-hook，百度搜一圈也没有看到什么地方有教程,本文就来简单介绍一下这个插件的使用方法，需要的可以参考一下
2022-12-12