JS10---javascript实现钟表

一.html内容

<style>
    .clock{
        width: 600px;
        height: 600px;
        position: relative;
        margin: auto;
        background: url("img/2.jpg") no-repeat;
    }
    .clock>div{
        width: 100%;
        height: 100%;
        position: absolute;
    }
    .hour{
        background: url("img/4.png") no-repeat center;
    }
    .min{
        background: url("img/3.png") no-repeat  center;
    }
    .sec{
        background: url("img/1.png") no-repeat center;
    }
</style>

# 二.js内容

<script>
//大体思路：获取时间对象 得到现在的时分秒
//表盘旋转  要缓慢旋转 当秒针走的时候，时针和分针也要走  需要借助毫秒
    var hour=document.getElementsByClassName("hour")[0];
    var min=document.getElementsByClassName("min")[0];
    var sec=document.getElementsByClassName("sec")[0];
    var h, m, s,ms;
    setInterval(function(){
        //要让指针缓慢动(三个指针每时每刻都在动，则每个时刻的时，分，秒都要获取到，需要利用毫秒)
        var date=new Date(); //获取到现在的时间
         ms=date.getMilliseconds() ;//获取现的毫秒
         s=date.getSeconds()+ms/1000;//获取秒,精确到0.1s
         m=date.getMinutes()+s/60;//获取分钟,精确到0.1min
         h=date.getHours()-12+m/60;//获取小时，精确到0.1h
        //console.log(ms);
        //console.log(h, m, s);
        //旋转事件
        //一圈360度，60分钟，60秒，12小时  则一分钟转6度   一秒转6度  一小时转30度
        sec.style.WebkitTransform="rotate("+ s*6 +"deg)";
        min.style.WebkitTransform="rotate("+ m*6 +"deg)";
        hour.style.WebkitTransform="rotate("+ h*30 +"deg)";


    },100)
</script>

以下为所需图片
下边的时针，分针，秒针都是垂直的；
若时针分针秒针为水平的，计算角度时需要减90°

分针

时针

秒针