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动态时钟内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
微信公众号搜索 “ 脚本之家 ” ,选择关注
程序猿的那些事、送书等活动等着你
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!
相关文章
JavaScript之BOM location对象+navigator对象+history 对象
这篇文章主要介绍了JavaScript BOM中的 location对象、navigator对象、history 对象,下面围绕他们的相关语法及各种资料展开文章详细内容,需要的小伙伴可以参考一下,希望对大家有所帮助2021-12-12JavaScript读二进制文件并用ajax传输二进制流的方法
这篇文章主要介绍了JavaScript读二进制文件并用ajax传输二进制流的方法的相关资料,需要的朋友可以参考下2016-07-07基于BootStrap与jQuery.validate实现表单提交校验功能
学习前台后台最开始接触的业务都是用户注册和登录,下面通过本文给大家介绍BootStrap与jQuery.validate实现表单提交校验功能,感兴趣的朋友一起学习吧2016-12-12
最新评论