html+css3实现网页时钟

在网页上实现时钟功能，效果如右图所示：

运用到的关键技术有：css3中的旋转、旋转基点设置

旋转：transform:rotate(*deg)

旋转基点：transform-origin: x轴偏移 y轴偏移

样式代码：

<style type="text/css" id="style">

        #clock{

            width:200px;

            height: 200px;

            border: 1px solid #000000;

            margin: 100px auto;

            border-radius: 50%;

            position: relative;

        }

        #ul{

            margin:;

            padding:;

            list-style: none;

            position: relative;

        }

        #ul li{

            width:2px;

            height: 6px;

            background:#000;

            position: absolute;

            top:;

            left:98px;

            -webkit-transform-origin:center 100px;  /*表盘上刻度的旋转中心点位于表盘中央，x轴中间，y轴距离顶部100的位置*/

        }

        #ul li:nth-of-type(5n+1){height:10px; }

        #clock div{

            position: absolute;

            -webkit-transform-origin:center bottom;

        }

        #hour{

            width:8px;

            height:45px;

            background: #0c0c0c;

            left: 96px;

            top:55px;

        }

         #min{

            width:6px;

            height:60px;

            background:#c0c0c0;

            left: 97px;

            top:40px;

        }

         #sec{

            width:4px;

            height:80px;

            background: red;

            left: 98px;

            top:20px;

        }

        #ico{

            width:20px;

            height: 20px;

            background: #000000;

            border-radius: 50%;

            left: 90px;

            top: 90px;

        }

        #time{

            text-align: center;

        }

    </style>

javascript代码：

<script type="text/javascript">

        window.onload = function(){

            var oUl = document.getElementById('ul');

            var oHour = document.getElementById('hour');

            var oMin = document.getElementById('min');

            var oSec = document.getElementById('sec');

            var oStyle = document.getElementById('style');

            var oTime = document.getElementById('time');

            var iLi = '';

            var iStyle ='';

            for(var i=0;i<60;i++)

            {

                iStyle+='#ul li:nth-of-type('+(i+1)+'){-webkit-transform:rotate('+(i*6)+'deg)}';

                iLi+='<li></li>';

            }

            oUl.innerHTML = iLi ;

            oStyle.innerHTML+=iStyle;

            function toMove(){

                var iHour = '';

                var iMin = '';

                var iSec = '';

                var oDate = new Date();

                iSec = oDate.getSeconds();

                iMin = oDate.getMinutes()+iSec/60;

                iHour = oDate.getHours()+iMin/60;

                oSec.style.webkitTransform='rotate('+(iSec*6)+'deg)';

                oMin.style.webkitTransform='rotate('+(iMin*6)+'deg)';/**/

                oHour.style.webkitTransform='rotate('+(iHour*30)+'deg)';/*表盘12小时，共360度，每小时走30度*/

                oTime.innerHTML='当前的时间是：'+ Math.floor(iHour)+'时'+Math.floor(iMin)+'分'+iSec+'秒';

            }

            setInterval(toMove,1000);

        };

    </script>

网页布局代码:

 <div id="clock">

        <ul id="ul">

            <li></li>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

        </ul>

        <div id="hour"></div>

        <div id="min"></div>

        <div id="sec"></div>

        <div id="ico"></div>

    </div>

    <div id="time"></div>

巴特西

html+css3实现网页时钟

最新文章

热门文章