JS時鐘鐘錶

時間 2019-12-14

原文原文鏈接

<!DOCTYPE html>html

<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
       <style>

           .clock{
               width: 600px;
               height: 600px;
               background: url(images/clock.jpg) no-repeat;
               margin: 50px auto;
               position: relative;
           }
           .clock div{
               width: 100%;
               height: 100%;
               position: absolute;
               top: 0;
               left: 0;
           }
           .h{
               background: url(images/hour.png) no-repeat center center;
           }
           .m{
               background: url(images/minute.png)no-repeat center center;
           }
           .s{
               background: url(images/second.png)no-repeat center center;
           }
       </style>


   </head>
   <body>
       <div class="clock">
           <div class="h" id="hour"></div>
           <div class="m" id="minute"></div>
           <div class="s" id="second"></div>
       </div>

       <script>
           var hour = document.getElementById("hour");
           var minute = document.getElementById("minute");
           var second = document.getElementById("second");

           //開啓定時器
           var s = 0;
           var m = 0, h = 0 , ms = 0;

           //開始定時器
           setInterval(function(){
               //寫對應的時間和內容

           //獲得最新的時間
           var date = new Date();

           //獲取對應的時分
           ms = date.getMilliseconds(); //如今的毫秒數
           //拿到秒數
           s = date.getSeconds() + ms / 1000;
           //拿到當前的分鐘
           m = date.getMinutes() + s / 60;
           //拿到小時
           h = date.getHours() % 12 + m / 60;

           //console.log(h);

           //計算旋轉的角度
           //一圈 360 度一共有 60 秒每秒 6° 如今幾乎都是秒

           second.style.webkitTransform = "rotate("+ s*6 +"deg)";
           minute.style.webkitTransform = "rotate("+ m*6 +"deg)";
           hour.style.webkitTransform = "rotate("+ h*30 +"deg)";


           second.style.MozTransform = "rotate("+ s*6 +"deg)";
           minute.style.MozTransform = "rotate("+ m*6 +"deg)";
           hour.style.MozTransform = "rotate("+ h*30 +"deg)";

           //second.style.MozTransform
                      //   變化              旋轉     deg 度


           },100);
       </script>
   </body>
</html>

web

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。