Day02 - JavaScript + CSS Clock

zzbo 發布于2019-08-20 18:07 / 2870人閱讀

摘要：作者簡介是推出的一個天挑戰。完整指南在從零到壹全棧部落。通過時分秒對一圈度，進行映射，確定每一個指針所需旋轉的角度。此前的代碼中，每秒都會重新一個對象，用來計算角度值，但如果讓這個角度值一直保持增長，也就不會出現逆時針回旋的問題了。

Day02 - JavaScript + CSS Clock

作者：?liyuechun
簡介：JavaScript30 是 Wes Bos 推出的一個 30 天挑戰。項目免費提供了 30 個視頻教程、30 個挑戰的起始文檔和 30 個挑戰解決方案源代碼。目的是幫助人們用純 JavaScript 來寫東西，不借助框架和庫，也不使用編譯器和引用。現在你看到的是這系列指南的第 2 篇。完整指南在從零到壹全棧部落。

簡介

第二天的練習是用JS+CSS模擬時鐘效果。

效果如下：

實現以上模擬時鐘的效果，大致思路和解決方案如下：

分別獲取到當前時間的時、分、秒。

通過時分秒對一圈360度，進行映射，確定每一個指針所需旋轉的角度。

通過CSS的transform：rotate(deg)，來實時的調整指針在鍵盤中的位置。

頁面布局

CSS樣式

涉及到的特性：

transform-oragin

調整指針的初始位置以及旋轉的軸點:transform-oragin

transform-oragin: 100%; //初始化使三個指針全部指向12時

transform: rotate()

設置旋轉角度

transition

transition: all //0.05s;設置動畫時間為0.05秒

transition-timing-function: cubic-bezier(x, x, x, x)

設置 transition-time-function 的值，以實現秒針“滴答滴答”的效果。此外注意 transform 中的 rotate （旋轉）屬性由角度來控制，可以試著在頁面上修改這個參數來查看效果。

JS代碼

獲取秒針、分鐘、小時節點

    const secondHand = document.querySelector(".second-hand");
    const minsHand = document.querySelector(".min-hand");
    const hourHand = document.querySelector(".hour-hand");

獲取當前時間秒、分、小時

const now = new Date();
const seconds = now.getSeconds();
const mins = now.getMinutes();
const hour = now.getHours();

計算秒、分、小時角度

const secondsDegrees = ((seconds / 60) * 360) + 90;
const minsDegrees = ((mins / 60) * 360) + ((seconds / 60) * 6) + 90;
const hourDegrees = ((hour / 12) * 360) + ((mins / 60) * 30) + 90;

根據角度設置樣式

secondHand.style.transform = `rotate(${secondsDegrees}deg)`;
minsHand.style.transform = `rotate(${minsDegrees}deg)`;
hourHand.style.transform = `rotate(${hourDegrees}deg)`;

設置定時器，每秒調用一次setDate函數

setInterval(setDate, 1000);

延伸思考

此處存在一個小瑕疵，當秒針旋轉一圈之后回到初始位置，開始第二圈旋轉，角度值的變化時 444° → 90° → 96° .... 這個過程中，指針會先逆時針從 444° 旋轉至 90°，再繼續我們期望的順時針旋轉，由于秒針變換時間只有 0.05s，所以呈現的效果就是秒針閃了一下，如果想要觀察細節，可以將 .second 設為 transition: all 1s，效果如下所示：

要解決這個問題，目前找到了兩種解決辦法：

第一種

第二種

既然引發問題的是角度的大小變化，那就可以對這個值進行處理。此前的代碼中，每秒都會重新 new 一個 Date 對象，用來計算角度值，但如果讓這個角度值一直保持增長，也就不會出現逆時針回旋的問題了。

源碼下載

Github Source Code

社群品牌：從零到壹全棧部落
定位：尋找共好，共同學習，持續輸出全棧技術社群
業界榮譽：IT界的邏輯思維
文化：輸出是最好的學習方式
官方公眾號：全棧部落
社群發起人：春哥(從零到壹創始人，交流微信：liyc1215)
技術交流社區：全棧部落BBS
全棧部落完整系列教程：全棧部落完整電子書學習筆記

關注全棧部落官方公眾號，每晚十點接收系列原創技術推送

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/84095.html

JavaScript 30 - 一起做一次了不起的挑戰

摘要：加入我們，一起挑戰吧掃碼申請加入全棧部落 JavaScript 30 - 一起做一次了不起的挑戰 (Node+Vue+微信公眾號開發)企業級產品全棧開發速成周末班首期班(10.28號正式開班，歡迎搶座) 在Github上看到了wesbos的一個Javascript30天挑戰的repo，旨在使用純JS來進行練習，不允許使用任何其他的庫和框架，該挑戰共30天，我會在這里復現這30天遇到的挑...

1treeS 2019-08-20 18:11 評論0 收藏0
Java 時間與日期處理

摘要：時間與日期處理從屬于筆者的現代開發系列文章，涉及到的引用資料聲明在學習與實踐資料索引中。可以通過靜態構造方法很容易的創建，定義了與之間的轉化關系時差類以年月日來表示日期差，而以秒與毫秒來表示時間差適用于處理與機器時間。 Java 時間與日期處理從屬于筆者的現代 Java 開發系列文章，涉及到的引用資料聲明在 Java 學習與實踐資料索引中。 Java 時間與日期處理在 Java 8...

HelKyle 2019-08-15 10:59 評論0 收藏0
java 8 時間類之徹底看懂 java.time.temporal.ChronoField

摘要：歡迎關注我的項目，這篇博文只是完善時間工具類的測試過程。歡迎關注我的項目：https://github.com/duanluan/ZUtil，這篇博文只是完善時間...

lentrue 2021-11-22 09:34 評論0 收藏0
20 個案例教你在 Java 8 中如何處理日期和時間?

摘要：前言前面一篇文章寫了如何安全的使用里面介紹了如何處理日期時間，以及如何保證線程安全，及其介紹了在中的處理時間日期默認就線程安全的類。引入了全新的日期時間格式工具，線程安全而且使用方便。前言前面一篇文章寫了《SimpleDateFormat 如何安全的使用？》, 里面介紹了 SimpleDateFormat 如何處理日期／時間，以及如何保證線程安全，及其介紹了在 Java 8 中的處...

Rango 2019-08-19 10:32 評論0 收藏0
2-datetime 模塊

摘要：時間轉字符串在我們的使用中，我們常常需要將時間轉換為字符串，用來作為文件的名字或者用于加密字符的輸出等等。晚了個小時，所以要減去即是美國時間參考 datetime 時間轉字符串在我們的使用中，我們常常需要將時間轉換為字符串，用來作為文件的名字或者用于加密字符的輸出等等。例子： from datetime import datetime datetime.strftime(datet...

LancerComet 2019-07-30 18:44 評論0 收藏0