JavaScript实现日程的动态效果

这个例子分享了js实现时间表动态效果的具体代码，供大家参考。具体内容如下

这里使用日期时间类

！doctype html html head meta charset=' utf-8 ' title date class schedule/title/head style # box { background : URL(img/1 . jpg)no-repeat；宽度： 600 px；高度： 600 px；margin: 0 auto相对位置：} #m，#s，# h { position: absolutetop: 0px左侧：50%；左边距：-15px；}/*此处使用绝对定位边距负值法将指针图片的时、分、秒居中，left:设置为50%边距-left */# h { background : URL(img/2 . png)无重复；宽度： 30px；高度： 600 px；position : absolute } # m { background : URL(img/3 . png)无重复；宽度： 30px；高度： 600 px；} # s { background : URL(img/4 . png)无重复；宽度： 30px；高度： 600 px；}/style script type=' text/JavaScript ' window . onload=function(){ functiongo(){//封装函数varoh=document . getelementbyid(' h ')；var om=document . getelementbyid(' m ')；var OS=document . getelementbyid(' s ')；var time=新日期()；//获取当前时间var s=time . getseconds()；//get seconds var min=time . getminutes()；//获取分钟var hour=time . gethours()；//获取小时OS . style . transform=' rotate '(s * 6 ' deg ')；//使用transform方法将图片旋转到指定位置。时钟上每一秒帧的度数为360/60 om . style . transform=' rotate '(min * 6 ' deg ')；//将获取的时间乘以旋转的度数，使图片改变到指定的位置哦。style . transform=' rotate(' hour * 30 ' deg ')；} go()；setInterval(go，20)；//设置定时器每20毫秒执行一次功能，就可以实现动态时钟。}/脚本体div id='box '！-布局框是钟表的背景图。你可以在网上找一个，设置为相对定位-！-里面放三张图片，分别是小时、分钟、秒的指针图，设置为绝对定位-div ID=' h '/div div ID=' m '/div div ID=' s '/div/div/body/html渲染

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。