CSS3--利用transform属性制作时钟效果

版权声明:本文为博主原创文章,如需要转载,请标明文章出处,谢谢。 https://blog.csdn.net/u010297791/article/details/54340553

       首先简单总结一下transform这个属性,transform的含义是:改变,使…变形;转换。

transform的常用属性:
       1)rotate()  旋转函数 取值度数
             deg  度数
             Transform-origin 旋转的基点
       2)skew() 倾斜函数 取值度数 
             skewX()
             skewY()
       3)scale() 缩放函数 取值 正数、负数和小数
             scaleX()
             scaleY()
       4)translate() 位移函数
            translateX()
            translateY()

注意:Transform 执行顺序问题 — 后写先执行。

案例说明:

       

实现代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>时钟</title>
    <style id="css">
        ul,li{
            padding: 0;
            margin: 0;
            list-style: none;
        }
        .box{
            width: 200px;
            height:200px;
            margin:100px auto;
            border:2px solid #000;
            border-radius: 50%;
            position: relative;
            background: url("images/bg.jpg") no-repeat;/*为了好看,我添加了一个背景*/
            background-size:100% 100%;
        }
        .box ul{
            height: 200px;
            position: relative;
        }
        .box ul li{
            width: 2px;
            height:6px;
            background-color: #000;
            position: absolute;
            left: 99px;
            top:0px;
            -webkit-transform-origin: center 100px; /*旋转基点*/
        }
        .box ul li:nth-of-type(5n+1){height: 12px}
        #hour{
            width: 4px;
            height: 45px;
            position: absolute;
            left: 98px;
            top:55px;
            background-color: #000;
            -webkit-transform-origin: bottom;
        }
        #min{
            width: 2px;
            height: 60px;
            position: absolute;
            left:99px;
            top:40px;
            background-color: #999;
            -webkit-transform-origin: bottom;
            -webkit-transform: rotate(60deg);
        }
        #sec{
            width: 2px;
            height: 75px;
            position: absolute;
            left:99px;
            top:25px;
            background-color: #ff2834;
            -webkit-transform-origin: bottom;
            -webkit-transform: rotate(36deg);
        }
        #circle{
            width: 16px;
            height: 16px;
            position: absolute;
            left:92px;
            top:92px;
            background-color: #000;
            border-radius: 50%;
        }
    </style>
</head>
<body>
<div class="box">
    <ul id="timeList"></ul>
    <div id="hour"></div>
    <div id="min"></div>
    <div id="sec"></div>
    <div id="circle"></div>
</div>
</body>
<script>
    window.οnlοad=function(){
        var oCss = document.getElementById("css");
        var oList =  document.getElementById("timeList");
        var oHour = document.getElementById("hour");
        var oMIn = document.getElementById("min");
        var oSec = document.getElementById("sec");

        addList();
        addTime();
        setInterval(function () {
            addTime();
        },1000);
	//添加时钟的刻度
        function addList(){
            var aLi ="";
            var sCss="";
            for (var i = 0; i < 60; i ++){
                sCss +=".box ul li:nth-of-type("+(i+1)+"){-webkit-transform: rotate("+i*6+"deg);}";
                aLi +="<li></li>";
            }
            oList.innerHTML=aLi;
            oCss.innerHTML+=sCss;
        };
	//获取时针、分针、秒针的度数
        function addTime(){
            var oDate = new Date();
            var iSec = oDate.getSeconds();
            var iMin = oDate.getMinutes()+iSec/60;
            var iHour = (oDate.getHours()%12)+iMin/60;

            oSec.style.webkitTransform="rotate("+(iSec*360/60)+"deg)";
            oMIn.style.webkitTransform="rotate("+(iMin*360/60)+"deg)";
            oHour.style.webkitTransform="rotate("+(iHour*360/12)+"deg)";
        }
    };
</script>
</html>
说明:

1、时针的度数 等于小时+当时的分钟 ,小时必须转化为12小时制,然后计算度数;

     分针的度数 等于分钟+当时的秒数, 分针必须转化为60分钟制,然后计算度数;

     秒针的度数 等于当时的秒,秒针必须转化为60秒制,然后计算度数;

     具体实现:

            var iSec = oDate.getSeconds();
            var iMin = oDate.getMinutes()+iSec/60;
            var iHour = (oDate.getHours()%12)+iMin/60;

    度数转化:
            oSec.style.webkitTransform="rotate("+(iSec*360/60)+"deg)";
            oMIn.style.webkitTransform="rotate("+(iMin*360/60)+"deg)";
            oHour.style.webkitTransform="rotate("+(iHour*360/12)+"deg)";

2、时针、分针和秒针如何运动,即随着时间的变化而移动

     此时需要一个setInterval()函数,这个函数可以设定在一定的时间内去调用函数,那么就可以实时获取时间,即可以实现时针、分针和秒针移动的效果。

3、图中刻度的设计同样用到了transform这个属性,要注意设置Transform-origin 旋转的基点。



展开阅读全文

没有更多推荐了,返回首页