JavaScript如何實現動態時鐘效果

本篇內容主要講解“JavaScript如何實現動態時鐘效果”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“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如何實現動態時鐘效果”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！