做了兩天了，簡單的談一下感受，這個項目雖然推出了好幾年了（2016），前端圈發(fā)生了天翻地覆的變化，隨著三大框架的流行， jQuery和原生JS 開發(fā)在國內逐漸失去主流地位，但是萬變不離其宗。原生JS至關重要。因為JS是這一切的基礎，就像高樓大廈的地基一樣，你總不能直接就開始四樓五樓吧，那是不現(xiàn)實的。

簡介：JavaScript30 是 Wes Bos 推出的一個 30 天挑戰(zhàn)。項目免費提供了 30 個視頻教程、30 個挑戰(zhàn)的起始文檔和 30 個挑戰(zhàn)解決方案源代碼。目的是幫助人們用純 JavaScript 來寫東西，不借助框架和庫，也不使用編譯器和引用。現(xiàn)在你看到的是這系列指南的第 2 篇。完整指南在 GitHub，喜歡請 Star 哦?(^?*)

實現(xiàn)效果

[圖片上傳失敗...(image-5d82d1-1632934898764)]

文檔中已經給出了 HTML 結構，表盤內有三個 div 對應三個指針。只需要添加一些 CSS 效果，然后用 JavaScript 動態(tài)更新指針的狀態(tài)即可

關鍵要點

1. 表盤上指針的樣式：旋轉的效果
2. 獲取實時的時間
3. 每一秒改變一次指針狀態(tài)

涉及到的特性：

• transform: rotate()
• transition
• setInterval(callback, time)
• setTimeout
• new Date()
• Date().getSeconds()
• Date().getMinutes()
• Date().getHours()
  Window.requestAnimationFrame()

過程指南

CSS 部分

在原作者的基礎上稍稍改進了一下 增加了三個偽元素 指針旋轉軸與表盤中心重合

 .second-hand::after {
            position: absolute;
            content: '';
            display: block;
            width: 5px;
            height: 50%;
            background-color: red;
            left: 50%;
            bottom: 50%;
            transform: translate(-50%, 0);
        }
        
        .min-hand::after {
            position: absolute;
            content: '';
            display: block;
            width: 10px;
            height: 40%;
            background-color: white;
            left: 50%;
            bottom: 50%;
            transform: translate(-50%, 0);
        }
        
        .hour-hand::after {
            position: absolute;
            content: '';
            display: block;
            width: 15px;
            height: 20%;
            background-color: white;
            left: 50%;
            bottom: 50%;
            transform: translate(-50%, 0);
        }

用偽元素 增加一個表盤的中心點

 .clock-face:after {
            content: '';
            display: block;
            width: 30px;
            height: 30px;
            border-radius: 100%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: white;
        }

JS部分

1. 利用定時器自動更新時間 有三種方式實現(xiàn)這種方法

   • 定時器 setInterval 可以每隔一段固定的時間將操作放入執(zhí)行隊列，利用這個特性，加入頁面后每秒更新一次時間，以實現(xiàn)秒針轉動的效果。

    setInterval(setDate, 1000);
    // setDate 為每 1000 毫秒觸發(fā)的 function
   

   • 定時器 setTimeout 設定延時 執(zhí)行一次 配合回調函數 形式 ，加入頁面后每秒更新一次時間，以實現(xiàn)秒針轉動的效果。

function timeoutHandler() {
                setClock(); //執(zhí)行 函數 
                setTimeout(timeoutHandler, 1000)
            }
 setTimeout(timeoutHandler, 1000)

• Window.requestAnimationFrame()方法

function animationHandler() {
                setClock();
                window.requestAnimationFrame(animationHandler)
            }
  window.requestAnimationFrame(animationHandler)

2. 獲取三個指針對應的 HTML 元素，留待后續(xù)操作

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

3. 編寫 setClock 方法

   1. 創(chuàng)建 Date 對象

   2. 獲取當前時間的小時、分鐘、秒

   3. 利用此刻的數據，計算每個指針對應的角度

      let secondDeg = data.getSeconds() * 6 //(360/60)
      

      以秒針為例，由于此頁面初始狀態(tài)中秒針為垂直的，所以零點時（時間起始位置）應用到元素上的 rotate 旋轉角度值應該為 6°。秒針轉一圈為 60s，所以每一秒對應表盤上的角度值即為 (...s / 60s) 。

      Wes Bos 給出的解決方案中，時針是和秒針一樣每一小時跳動一次，若要模擬更加真實的時鐘，要使時針在一小時內緩慢的移動到下一個時間點。所以可以利用上分鐘，計算每一分鐘對時針的角度影響，將加到時針角度上即可。

      let minDeg = data.getMinutes() * 6 + data.getSeconds() * 6 / 60 //(360/60)
              let hourDeg = data.getHours() * 30 + data.getMinutes() * 30 / 60 //(360/12)
      

   4. 將角度值賦值給 HTML 元素的 style 中的 transform 屬性

  //動態(tài)改變樣式 表盤時針旋轉的角度 
                second.style.transform = `rotate(${secondDeg}deg)`
                min.style.transform = `rotate(${minDeg}deg)`
                hour.style.transform = `rotate(${hourDeg}deg)`