zoukankan      html  css  js  c++  java
  • 用CSS3写的钟表

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style id="css">
            #wrap{
                 200px;
                height: 200px;
                border: 1px solid #000;
                border-radius: 50%;
                margin: 100px auto;
                position: relative;
            }
            #wrap ul{
                margin: 0;padding: 0;
                height: 200px;
                list-style: none;
                position: relative;
            }
            #wrap ul li{
                 2px;height: 8px;background: #000;
                position: absolute;
                left: 99px;
                top:0;
                -webkit-transform-origin: center 100px;
            }
            /*#wrap ul li:nth-of-type(1){
                -webkit-transform: rotate(0deg);
            }
            #wrap ul li:nth-of-type(2){
                -webkit-transform: rotate(6deg);
            }
            #wrap ul li:nth-of-type(3){
                -webkit-transform: rotate(12deg);
            }
            #wrap ul li:nth-of-type(4){
                -webkit-transform: rotate(18deg);
            }
            #wrap ul li:nth-of-type(5){
                -webkit-transform: rotate(24deg);
            }
            #wrap ul li:nth-of-type(6){
                -webkit-transform: rotate(30deg);
            }
            #wrap ul li:nth-of-type(7){
                -webkit-transform: rotate(36deg);
            }
            #wrap ul li:nth-of-type(8){
                -webkit-transform: rotate(42deg);
            }*/
            #wrap ul li:nth-of-type(5n+1){
                height: 12px;
            }
            #hour{
                 6px;
                height: 45px;
                background: #000;
                position: absolute;
                left: 97px;
                top:55px;
                -webkit-transform-origin: bottom;
            }
            #min{
                 4px;
                height: 65px;
                background: #999;
                position: absolute;
                left: 98px;
                top: 35px;
                -webkit-transform-origin: bottom;
            }
            #sec{
                 2px;
                height: 80px;
                background: red;
                position: absolute;
                left: 99px;
                top: 20px;
                -webkit-transform-origin: bottom;
            }
            #icon{
                 20px;height: 20px;
                background: #000;
                border-radius: 50%;
                position: absolute;
                left: 90px;
                top: 90px;
            }
        </style>
    </head>
    <body>
        <div id="wrap">
            <ul id="list">
                <!--<li></li>
                <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="icon"></div>
        </div>
        <script>
            var oList=document.getElementById('list');
            var oCss=document.getElementById('css');
            var oHour=document.getElementById('hour');
            var oMin=document.getElementById('min');
            var oSec=document.getElementById('sec');
            var aLi='';
            var sCss='';
            for(var i= 0;i<60;i++){
                sCss+='#wrap ul li:nth-of-type('+(i+1)+'){-webkit-transform: rotate('+i*6+'deg);}';
                aLi+='<li></li>';
            }
            oList.innerHTML=aLi;
            oCss.innerHTML+=sCss;
            setInterval(toTime,1000);
            toTime();
            function toTime(){
                var oDate=new Date();
                var iSec=oDate.getSeconds();
                var iMin=oDate.getMinutes()+iSec/60;
                var 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)';
            }
        </script>
    </body>
    </html>
    

        

      在写的过程中,发现了一个小问题:

      

      时分秒的顺序不能写错,开始我把时写在最上面,时针和分针怎么都没反映,这是执行顺序的原因吗?

  • 相关阅读:
    Web---JSP-EL表达式
    JSP---JavaBean的使用-jsp:useBean标签相关
    Web---JSP注册技术的的演绎(3代)-JSP/EJB/Servlet/POJO/JavaBean
    Web---myAjax(自己写底层)-隐藏帧技术
    JSP---JSP中4个容器-pageContext使用
    JSP---演示ErroPage、isErroPage和jsp:forword标签
    JSP-讲解(生成java类、静态导入与动态导入)
    经典算法面试题目-替换字符串的内容(1.5)
    【Android UI】Android Layout XML属性
    【Android UI】:Fragment官方文档
  • 原文地址:https://www.cnblogs.com/jessiechen/p/5852717.html
Copyright © 2011-2022 走看看