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動態時鐘內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！