今日編輯文章的勵志小語

「做不到」這三個字，有時候是鐵錚錚的事實，但有時候只是一個藉口，讓你在其它事情上止步不前的藉口。－約翰．伍登

一樣是看Alex老師的影片來練習。

先修改CSS設定，把指針都放到偽元素內，比較好操作。例如

.hand {
    position: absolute;
    width: 100%;
    height: 100%;
    &-hour { //時針
        // border: 1px solid #e9c46a;
        &::after {
            content: '';
            position: absolute;
            width: 15px;
            height: 35%;
            border-radius: 15px;
            background-color: #e9c46a;
            left: 50%;
            bottom: 50%;
            transform: translate(-50%, 0%);
        }
    }

實際轉動的是.hand-hour，.hand-hour::after則是固定在.hand-hour上

開始寫JS吧，先抓取節點

const hour = document.querySelector('.hand-hour') //時針
const min = document.querySelector('.hand-min'); //分針
const second = document.querySelector('.hand-second'); //秒針

使用Date抓取時間

let setClock = () => {
    let now = new Date();
}

計算角度並存入變數，時針和分針後方的算式是為了讓指針逐漸前進，不會時間到了突然往前跳

let secondDeg = now.getSeconds() * (360 / 60);
let minDeg = now.getMinutes() * (360 / 60) + now.getSeconds() * (360 / 60) / 60;
let hourDeg = now.getHours() * (360 / 12) + now.getMinutes() * (360 / 12) / 60;

把計算結果放入節點的CSS內

 hour.style.transform = `rotate(${hourDeg}deg)`;
 min.style.transform = `rotate(${minDeg}deg)`;
 second.style.transform = `rotate(${secondDeg}deg)`;

呼叫方訊進行畫面初始化

setClock();

對於持續執行，老師教了3種方法，依照自己的需求選擇即可。

//方法1
setInterval(setClock, 1000); //每秒呼叫一次 (設定間隔，持續執行)

//方法2
let timeOut=()=>{
    setClock();
    setTimeout(timeOut, 1000);//呼叫自己以達到連續執行的效果
}
setTimeout(timeOut, 1000); //設定延遲，執行一次

// 方法3 
// 製作動畫，刷新頻率視硬體而定，適合處理與畫面有關者
let animationHandler = () => {
    setClock();
    window.requestAnimationFrame(animationHandler);
}
window.requestAnimationFrame(animationHandler); //處理畫面更新的setTimeout

連結