CSS3实现时间表

最新推荐文章于 2023-09-21 14:19:19 发布

weixin_34403693

最新推荐文章于 2023-09-21 14:19:19 发布

阅读量181

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/zlx7/p/4971209.html

版权

一直想学CSS3，今天别的论坛看到的例子，挺好，mark起来以后自己看。

<!doctype html>
<html>
    <head>
        <meta charset='utf-8'>
        <title>title</title>
        <style>
            *{margin:0;padding:0}
            #box{
                width:300px;
                height:300px;
                border:1px solid #000;
                border-radius:50%;
                position:absolute;
                top:100px;left:300px;
                box-shadow:1px 1px 5px #000;
                cursor:pointer;
            }
            .hour{
                width:14px;
                height:80px;
                background:#000;
                position:absolute;
                top:50%;left:50%;
                margin:-80px 0 0 -7px;
                transform-origin:center bottom;
            }
            .min{
                width:14px;
                height:100px;
                background:#000;
                position:absolute;
                top:50%;left:50%;
                margin:-100px 0px 0px -7px;
                border-radius:50% 50% 0 0;
                transform-origin:center bottom;
            }
            .sec{
                width:4px;
                height:120px; 
                background:red;
                position:absolute;
                top:50%;left:50%;
                margin:-120px 0 0 -2px;
                transform-origin:center bottom;
            }
            .cap{
                width:20px;
                height:20px; 
                background:#999;
                border-radius:50%; 
                position:absolute;
                top:50%;left:50%;
                margin:-10px 0 0 -10px;
            }
            .scale{
                width:4px;
                height:10px;
                background:#000;
                position:absolute;
                left:50%;
                margin-left:-2px;
                display:block;
                -webkit-transform:rotate(45deg);
                transform-origin:center 150px;
            }
            .bs{
                width:6px;height:18px;
                background:#000;
                position:absolute;
                left:50%;
                margin-left:-3px;
                display:block;
                -webkit-transform:rotate(45deg);
                transform-origin:center 150px;
            }
            .bs em{
                width:50px;
                text-align:center;
                margin:17px 0;
                position:absolute;
                top:0px;left:50%;
                margin-left:-25px;
                font-style:normal
            }
        </style>
    <script type="text/javascript">
        window.onload = function(){
            var oBox = document.getElementById('box');
            var oH = document.querySelector('.hour');
            var oM = document.querySelector('.min');
            var oS = document.querySelector('.sec');
            var  N = 60;
            for(var i=0;i<N;i++){
                var oSpan = document.createElement('span');
                if(i%5==0){
                    oSpan.className = 'bs';
                    var num = i/5==0 ? 12:i/5;
                    oSpan.innerHTML = '<em>'+num+'</em>';
                    oSpan.style.transform = 'rotate('+(i*N)+'deg)';
                    oSpan.children[0].style.transform = 'rotate('+ -i*6 +'deg)';
                }else{
                    oSpan.className = 'scale';
                }
                oBox.appendChild(oSpan);
                oSpan.style.transform = 'rotate('+6*i+'deg)';
            }
            
            function clock(){
                var oDate = new Date();
                var h = oDate.getHours();
                var m = oDate.getMinutes()+1;
                var s = oDate.getSeconds();
                var ms= oDate.getMilliseconds();
                oH.style.transform = 'rotate('+(h*30+m/60*30)+'deg)';
                oM.style.transform = 'rotate('+(m*6+s/60*6)+'deg)';
                oS.style.transform = 'rotate('+(s*6+ms/1000*6)+'deg)';
            }
            clock();
            setInterval(clock,30);
        }
    </script>
    </head>
    <body>
        <div id="box">
            <div class="hour"></div>
            <div class="min"></div>
            <div class="sec"></div>
            <div class="cap"></div>
        </div>
    </body>
</html>