js+css3精美立体感图标时钟特效免费下载

一款js+css3绘制的精美立体感图标时钟特效,非常精致美观的网页时钟动画特效。

JS代码

<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>
恭喜,此资源为免费资源,请先
本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有! 若您需要使用非免费的软件、源码或服务,请购买正版授权并合法使用! 本站发布的内容若侵犯到您的权益,请联系站长删除,我们将及时处理! 本站所有资源均是收集而来,资源均不包含技术支持和安装服务!点击下载视为同意资源仅限学习使用。
打赏
下载价格:免费
下载说明:本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有! 若您需要使用非免费的软件、源码或服务,请购买正版授权并合法使用! 本站发布的内容若侵犯到您的权益,请联系站长删除,我们将及时处理! 本站所有资源均是收集而来,资源均不包含技术支持和安装服务!点击下载视为同意资源仅限学习使用。
0

评论0

请先

没有账号? 忘记密码?

社交账号快速登录