JavaScript 30 - 2 學習筆記

標籤：width   origin   指標   htm   console   gets   gre   sci   for   

學習JavaScirpt30的筆記！

有意思！

2------->   CSS clock

 

效果是這樣的.... 這是改良過後的 版本....

話不多說，直接來看代碼。

首先是html部分

<div class="clock">        <div class="clock-face">            <div class="hand hour-hand"></div>            <div class="hand min-hand"></div>            <div class="hand second-hand"></div>        </div>    </div>

最外層的  clock 來作為底部的圓環。

變化都是在 clock-face 裡面的。

之後就是三個 div指標啦。

 

下面是CSS 部分

　　.clock{                width: 300px;        height: 300px;        border-radius: 50%;        border:5px solid #dca;    }    .clock-face{        width: 90%;        margin: 0 auto;        height: 300px;        position: relative;    }    .hand{        width: 50%;        height: 3px;                position: absolute;        top: 50%;        transform: rotate(-90deg);        transform-origin: 0%;        left: 50%;
               transition-timing-function: cubic-bezier(0, 1.74, 0.77, 0.87);    }    .second-hand{                transition-duration: .05s;        background-color:red;    }    .min-hand{        width: 120px;        transition-duration: .05s;        background-color:#666;    }    .hour-hand{        width: 100px;        transition-duration: .05s;        background-color:gray;    }

最需要關注的地方就是這裡

   .hand{        width: 50%;        height: 3px;                position: absolute;        top: 50%;        transform: rotate(-90deg);        transform-origin: 0%;        left: 50%;               transition-timing-function: cubic-bezier(0, 1.74, 0.77, 0.87);    }

   transform-origin: 0%;

transform-Origin屬性允許您更改轉換元素的位置。

2D轉換元素可以改變元素的X和Y軸。 3D轉換元素，還可以更改元素的Z軸。

transform-origin: 0%;設定為0 其實就是以hand的開始部分為圓點來旋轉指標。
如果我們將transform-origin 設定為50%，看看是什麼樣子的效果。

..整指標都是以width = 50% 的地方開始旋轉的。

視頻裡面的  transform-origin 是100%。 因為他沒有設定每個指標的長度，預設都是一樣長的。所以設定為100%的話是沒有什麼影響的。

但是如果想要設長度，考慮到div 的  position: absolute;  的時候。 他是自動向左靠攏的。如果我們以100%的origin來設定他的話，就會出現這樣的情況。

指標們並沒有共用圓心。所以給origin 設定為0%，（同時要調整圓心的位置 left：50%）。

 

接下來看js

 

          const secondHand = document.querySelector(‘.second-hand‘);          const minHand = document.querySelector(‘.min-hand‘);          const hourHand = document.querySelector(‘.hour-hand‘);                    function setDate(){                const now= new Date();                const seconds = now.getSeconds();                const secondsDegrees = ((seconds/60)*360-90);                const mins = now.getMinutes();                const minsDegrees=((mins/60)*360-90);                const hours = now.getHours();                const hoursDegrees=((hours/12)*360-90);               if(seconds==0){                   secondHand.style.transitionDuration=‘0s‘;                              }               else{                   secondHand.style.transitionDuration=‘.1s‘;                              }               if(mins==0){                   minHand.style.transitionDuration=‘0s‘;               }else{                   minHand.style.transitionDuration=‘.05s‘;               }               if(hours==0){                   hourHand.transitionDuration=‘0s‘;               }else{                   hourHand.transitionDuration=‘.05s‘;               }                                  secondHand.style.transform = `rotate(${secondsDegrees}deg)`;               minHand.style.transform = `rotate(${minsDegrees}deg)`;               hourHand.style.transform = `rotate(${hoursDegrees}deg)`;                console.log(seconds);          }          setInterval(setDate,1000);

 

核心部分是這裡

 const now= new Date(); const seconds = now.getSeconds(); const secondsDegrees = ((seconds/60)*360-90);

利用了js裡的date 直接擷取了當前的秒數（簡單粗暴..）
然後計算出每次 指標的位移量  (秒數/60s)*360°-90°；
為什麼要-90°？？ 因為如果不-90°，那麼這個指標的起始位置就不是12點 ，而是3點！ 

視頻裡面是+90°， 因為他使用的origin 是100%，而我使用的是 0%，兩個的圓點不一樣，旋轉的方向是一樣的。相當於我是從3點的位置開始 ，而視頻裡面是從9點的位置開始，
而我們都想要他從12點的位置開始，所以才需要+-90°。

然後用定時器每秒調用 setDate()，大家可能看到了有這樣的三個判斷。

 　　　　　　　　 if(seconds==0){                   secondHand.style.transitionDuration=‘0s‘;                              }               else{                   secondHand.style.transitionDuration=‘.1s‘;                              }               if(mins==0){                   minHand.style.transitionDuration=‘0s‘;               }else{                   minHand.style.transitionDuration=‘.05s‘;               }               if(hours==0){                   hourHand.transitionDuration=‘0s‘;               }else{                   hourHand.transitionDuration=‘.05s‘;               }    

 

這其實是對視頻裡面代碼的改進...因為 每次從59s-->60s 的這個時候，其實second 的值是 59-->0.而這個時候如果 繼續讓 transition-Duration 有值的話。

就會出現指標快速的繞了一圈的效果，影響視覺體驗，所以在0s的時候把 transition-Duration 設定為0 ，可以跳過這個旋轉的動畫，直接過渡，之後再將其

設定回來，就可以了。

但是我覺得....這樣的判斷和操作會不會對瀏覽器的效能是一種消耗，因為其實只需要在0s的時候設定1次，1s的時候再設定回來。之後的58s內都不需要對其進行

操作... 

 

如果有大佬有更好的寫法，希望告知，謝謝~！！

 

JavaScript 30 - 2 學習筆記