分类
<link type="text/css" href="css/style.css" rel="stylesheet" />
<div id="clock"> <div class="hour"> <div class="min"></div> <div class="min"></div> <div class="min"></div> <div class="min"></div> <div class="min"></div> </div> <div class="hour"> <div class="min"></div> <div class="min"></div> <div class="min"></div> <div class="min"></div> <div class="min"></div> </div> <div id="alarm"> </div> <div id="min"></div> <div id="hour"></div> <div id="sec"></div> <ol> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ol> </div> <script> window.requestAnimFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function( callback ){ window.setTimeout(callback, 1000 / 60); }; })(); //initialize the clock in a self-invoking function (function clock(){ var hour = document.getElementById("hour"), min = document.getElementById("min"), sec = document.getElementById("sec"); //set up a loop (function loop(){ requestAnimFrame(loop); draw(); })(); //position the hands function draw(){ var now = new Date(),//now then = new Date(now.getFullYear(),now.getMonth(),now.getDate(),0,0,0),//midnight diffInMil = (now.getTime() - then.getTime()),// difference in milliseconds h = (diffInMil/(1000*60*60)),//hours m = (h*60),//minutes s = (m*60);//seconds //rotate the hands accordingly sec.style.webkitTransform = "rotate(" + (s * 6) + "deg)"; hour.style.webkitTransform = "rotate(" + (h * 30 + (h / 2)) + "deg)"; min.style.webkitTransform = "rotate(" + (m * 6) + "deg)"; } })();</script>
1. 本站所有素材(未指定商用),仅限学习交流。
2. 会员在本站下载的原创商用和VIP素材后,只拥有使用权,著作权归原作者及17素材网所有。
3. 原创商用和VIP素材,未经合法授权,请勿用于商业用途,会员不得以任何形式发布、传播、复制、转售该素材,否则一律封号处理。
4. 本平台织梦模板仅展示和个人非盈利用途,织梦系统商业用途请预先授权。