文章分类 Classification
html5时钟动画
稿件来源: 阳光企业网站管理系统 撰稿作者: 太阳光 发表日期: 2012-03-29 阅读次数: 283 查看权限: 游客查看
以前制作时钟至多是使用flash制作。如果纯html时钟也不再是神话啦。
浏览效果:点击查看 注意请使用支持html5的浏览器查看,如Firefox;chrome;safari等,IE8以下就免谈了。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>css3时钟</title> </head> <style type="text/css"> body{ font-size:12px; margin:0; text-align:center; } #clock { background: url("images/clockface.png") no-repeat 0 0; height: 256px; width: 256px; list-style: none; margin: 0 auto; position: relative; } #sec, #min, #hour { height: 256px; left: 122px; position: absolute; top: 0; width: 12px; } #sec {background: url("images/sechand.png") repeat scroll center center transparent} #min {background: url("images/minhand.png") repeat scroll center center transparent} #hour {background: url("images/hourhand.png") repeat scroll center center transparent} </style> <body> <ul id="clock"> <li id="sec"></li> <li id="hour"></li> <li id="min"></li> </ul> <script type="text/javascript"> //查出本浏览器使用的CSS属性 var props = 'transform WebkitTransform MozTransform OTransform msTransform'.split(' '), prop,el = document.createElement('div'); for(var i = 0, l = props.length; i < l; i++) { if(typeof el.style[props[i]] !== "undefined") { prop = props[i]+""; break; } } function clock(){ var date=new Date(); var h=date.getHours(); var m=date.getMinutes(); var s=date.getSeconds(); var srotate = "rotate(" + (h*30+m/2) + "deg)"; document.getElementById("hour").style[prop]=srotate; srotate = "rotate(" + m*6 + "deg)"; document.getElementById("min").style[prop]=srotate; srotate = "rotate(" + s*6 + "deg)"; document.getElementById("sec").style[prop]=srotate; } (function() { clock();//先运行一下,以防指针抖动感觉 setInterval("clock()",1000); })(); </script> </body> </html>
=====================================这是一条美丽的分割线=====================================
在制作FLASH时钟时我们还可以考虑把毫秒数添加进入使秒指针呈不断转动效果,不过定时器也会增加,相对耗资源(不过你是感觉不到的),我们的html5时钟也是类似原理。
//在上面代码的基础上,关键代码: //为0的时候同时计算毫秒,使秒指针不断的在转 var ms=new Date().getMilliseconds(); srotate = "rotate(" +(s*6+parseInt(ms/166))+ "deg)";
效果:狠狠点击查看 (注意请使用支持html5的浏览器查看,如Firefox;chrome;safari等,IE8以下就免谈了)
关键词: html5,css动画 编辑时间: 2012-04-01
0
高兴0
支持0
搞笑0
不解0
谎言0
枪稿0
震惊0
无奈1
无聊0
反对0
愤怒
0%(0)
0%(0)
- 暂无评论
文章图片 article Pictrue
网友评论