CSS3+JS实现时钟效果

使用css3属性和js实现一格简单的时钟demo
DEMO

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>clock</title>
<style>
*{ margin:0; padding:0;}
.clock{width:400px; height:400px; background:#F66; border-radius:50%; margin:100px auto;}
.time-box{width:360px; height:360px; background:#fff; border-radius:50%; position:relative; top:20px; left:20px;}
.time-box span{ font-size:36px; position:absolute;}
.hour-1{ top:45px; right:80px; transform:translate(-50%,-50%);}
.hour-2{ top:110px; right:25px; transform:translate(-50%,-50%);}
.hour-3{ right:5px; top:180px;transform:translate(0,-50%);}
.hour-4{ right:25px; bottom:60px;transform:translate(-50%,-50%);}
.hour-5{ right:80px; bottom:0px;transform:translate(-50%,-50%);}
.hour-6{ bottom:5px; left:180px;transform:translate(-50%,0);}
.hour-7{ left:100px; bottom:0px;transform:translate(-50%,-50%);}
.hour-8{ left:40px; bottom:60px;transform:translate(-50%,-50%);}
.hour-9{left:5px; top:180px;transform:translate(0,-50%);}
.hour-10{ top:110px; left:50px; transform:translate(-50%,-50%);}
.hour-11{top:45px; left:100px; transform:translate(-50%,-50%);}
.hour-12{ left:180px; top:5px; transform:translate(-50%,0);}

.center{width:10px; height:10px; background:#000; border-radius:50%; position:absolute; left:50%; top:50%;transform:translate(-50%,-50%);}
.second-pointer{width:2px; height:150px; background:#F00; position:absolute; bottom:160px; left:179px;transform-origin:50% 130px;transform: rotate(30deg); z-index:999; }
.min-pointer{width:4px; height:100px; background:#000; position:absolute;left:178px; bottom:180px;transform:translate(-50%,-5px);transform-origin:50% 100%;transform: rotate(0deg); z-index:998; }
.hour-pointer{width:8px; height:60px; background:#000; position:absolute; bottom:180px; left:176px;transform:translate(-50%,-5px);transform-origin:50% 100%;transform: rotate(60deg); z-index:997;}
</style>
</head>

<body>
<div class="clock">
    <div class="time-box">
        <span class="hour-1">1</span>
        <span class="hour-2">2</span>
        <span class="hour-3">3</span>
        <span class="hour-4">4</span>
        <span class="hour-5">5</span>
        <span class="hour-6">6</span>
        <span class="hour-7">7</span>
        <span class="hour-8">8</span>
        <span class="hour-9">9</span>
        <span class="hour-10">10</span>
        <span class="hour-11">11</span>
        <span class="hour-12">12</span>
        <div class="center"></div>
        <div class="second-pointer" id="se-point" style="transform: rotate(330deg);"></div>
        <div class="min-pointer" id="m-point"></div>
        <div class="hour-pointer" id="h-point"></div>
    </div>
</div>
<script>
    window.onload = function(){
        getse();
    }
    function getse(){                           //执行主函数秒针移动
        var se = setInterval(function(){    
            pointmove("se-point");
        },1000);
    }
    var today=new Date(),
            h=today.getHours(),
            m=today.getMinutes(),
            s=today.getSeconds();
            var se_point = document.getElementById('se-point');
            se_point.style.transform = "rotate("+s*6+"deg)";
            var m_point = document.getElementById('m-point');
            m_point.style.transform = "rotate("+m*6+"deg)";
            var h_point = document.getElementById('h-point');
            h=h%12;
            var hour = parseInt((m*6)/72);
            //alert(hour);
            h_point.style.transform = "rotate("+(h*30+hour*6)+"deg)"; //获取当前时间,换算成对应指针的角度
            //alert(h)
    function pointmove(name){                                  //秒针走动,判断分针和十针的状态
        var se_point = document.getElementById(name);
        var se_rot = se_point.style.transform,
            se_now = null,
            //alert(yl);
            se_array = new Array;
            se_array = se_rot.split('(');
            se_now = parseInt(se_array[1]);
            se_now+=6;
            if(se_now==360){          //如果秒针转一圈,分针跳动一格
                se_now = 0;
                m+=1;    
                var minite = m*6;
                m_point.style.transform = "rotate("+minite+"deg)";
                if(minite==360){
                    minite=0;
                    h+=1;
                    h_point.style.transform = "rotate("+h*30+"deg)";    
                }else if(minite%72==0){                       //如果分针转动72度,时针跳动一格
                    var h_rot = h_point.style.transform;
                    h_array = new Array;
                    h_array = h_rot.split('(');
                    h_now = parseInt(h_array[1]);
                    //alert(h_now)
                    h_now+=6;
                    h_point.style.transform = "rotate("+h_now+"deg)";    
                }
            }
        se_point.style.transform = "rotate("+se_now+"deg)";
        //console.log(se_now);
    }

</script>
</body>
</html>

点击查看demo

原理:每隔一秒钟让秒针转动6°,然后对状态进行判断,当秒针转动360°时分针转动一格(即6°),同时秒针角度置零。分针也是同理,不过时针是12进制的,所以角度为30°一格,单分针转动72°时,时针转动一小各(6°)。

发表评论

电子邮件地址不会被公开。 必填项已用*标注