JS实现钟表

最新推荐文章于 2023-01-15 17:32:44 发布

diantiaozhu8383

最新推荐文章于 2023-01-15 17:32:44 发布

阅读量114

点赞数

原文链接：http://www.cnblogs.com/junxi/p/5228470.html

版权

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=640,user-scalable=no,target-densitydpi=device-dpi" />
        <style>
        *{
           margin:0;
           padding:0;
        }
        .parents{
            width:250px;
            height:250px;
            background:#000;
            -webkit-border-radius:20px;
        }
         .ab{
            position: absolute;
            width: 1px;
            height: 1px;
            border: 0px solid #999;
            background: #999;
            line-height: 3px;
            text-indent: -4px;
            font-size: 6px;
         }
         p.houre{
            height:200px;
            position:absolute;
            top:25px;
            left:125px;
            background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAABxCAYAAADlPJLFAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAPhJREFUeNrsmMEKgkAQhrWDbyAIXT0FnoRA8GrHXqs3CHqNEDp5EgqiQxTdwlvPEEiw/VuzIqGhBp3+gQ90Zz7WndmTtlLKaol6wv5MjqyBQZEiRYoUKVKkSJEiRYoUKVKkSJEiRYoU/yzaDb+CIzAHY3m/gTXYte3ogg3YggTchUTWdM6rqvWOwAUFOIFA1uoEkiukthJTcAFOg2RwpCY14hQ8QPhFMoRSG+nmLPDFIZh1bGgG9ro5E3DuMYmjdrRYDhhjqcUrCHpIwcvBGWM5sN+hOb7UxvVx5B3GkdfH8dMF0HggU+84gBVYyrOSnGfqB1/ypwADAJwYYKUbK5foAAAAAElFTkSuQmCC) 0 29px no-repeat rgba(0,0,0,0);
            width:10px;
            background-size:100%;
         }
         p.minutes{
            position: absolute;
            top:25px;
            left:125px;
            background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAACLCAIAAAArqbRdAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAACBJREFUeNpi/P//PwMYMDHAwChrlDXKGmWNsqjNAggwAC0BBBMOvt0tAAAAAElFTkSuQmCC) 0 4px no-repeat rgba(0,0,0,0);
            height:200px;
            width:2px;
            background-size:100%;
          }
         p.second{
            position: absolute;
            top:25px;
            left:125px;
            background:rgba(0,0,0,0);
            height:200px;
            width:1px;
          }
          p.second:before{
            content: "";
            position: absolute;
            top:0;
            left:0;
            background:#642D0E;
            height:100px;
            width:1px;
          }
        </style>
    </head>
    <body>
       <div class="parents">
           <p class="houre"></p>
           <p class="minutes"></p>
           <p class="second"></p>
       </div>
       <p class="nowtime"></p>
    </body>
    <script>
        (function(){
            var a=125,b=125,r=100,sdeg=mdeg=hdeg=0,divs=timer=null;
            var second=document.querySelector(".second"),
                minute=document.querySelector(".minutes"),
                houre=document.querySelector(".houre"),
                nowtime=document.querySelector(".nowtime"),
                parents=document.querySelector(".parents"),
                nowhours=(new Date().getHours()<=12)?new Date().getHours():new Date().getHours()-12,
                nowminutes=new Date().getMinutes(),
                nowseconds=new Date().getSeconds();
                console.log(nowhours+"sss"+nowminutes+"sssss"+nowseconds);
                hdeg=nowhours*30;
                mdeg=nowminutes*6;
                sdeg=nowseconds*6;
                clearInterval(timer);
                timer=setInterval(function(){
                    if(sdeg>=360){
                        sdeg=0;
                        if(mdeg>360){
                          mdeg=0;
                          hdeg+=6;
                          if(hdeg>=360){
                             hdeg=0;
                          }
                        }
                        mdeg+=6;    
                    }
                    sdeg+=6;
                    second.style.webkitTransform='rotate('+sdeg+'deg)'; 
                    minute.style.webkitTransform='rotate('+mdeg+'deg)';
                    houre.style.webkitTransform='rotate('+hdeg+'deg)';
                    nowtime.innerText=new Date().toLocaleTimeString();
                },1000)
                for(var times=0; times<60; times++) {
                    var hudu = (2*Math.PI/ 360) * 6 * times;
                    var X = a + Math.sin(hudu) * r;
                    var Y = b - Math.cos(hudu) * r;
                    divs=document.createElement("div");
                    divs.className="ab";
                    divs.style.cssText='left:'+X+'px;top:'+Y+'px;';
                    divs.style.webkitTransform='rotate('+(6*times)+'deg)';
                    if(times%5==0){
                    divs.innerText=times/5;
                    divs.style.cssText='background:#2F5FA1;height:8px;border-color:#2F5FA1';
                    }
                    if(times==0)divs.innerText=12;
                    parents.appendChild(divs);
                }
        })()
    </script>
</html>

演示地址: http://sandbox.runjs.cn/show/xloecikn

转载于:https://www.cnblogs.com/junxi/p/5228470.html

diantiaozhu8383

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS实现钟表

<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=640,user-scalable=no,target-densitydpi=devic...
复制链接

扫一扫