js+css3精美立体感图标时钟特效-站长技术网

js+css3精美立体感图标时钟特效

时间:2019-11-15 10:34:34 来源:网络收集作者:不详点击:次

源码授权：免费特效运行环境： JS+CSS3 源码大小： 3 KB
普通会员
点击下载

一款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>