亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

Day02 - JavaScript + CSS Clock

zzbo / 2946人閱讀

摘要：作者簡介是推出的一個天挑戰(zhàn)。完整指南在從零到壹全棧部落。通過時分秒對一圈度，進(jìn)行映射，確定每一個指針?biāo)栊D(zhuǎn)的角度。此前的代碼中，每秒都會重新一個對象，用來計算角度值，但如果讓這個角度值一直保持增長，也就不會出現(xiàn)逆時針回旋的問題了。

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

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

效果如下：

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

分別獲取到當(dāng)前時間的時、分、秒。

通過時分秒對一圈360度，進(jìn)行映射，確定每一個指針?biāo)栊D(zhuǎn)的角度。

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

頁面布局
CSS樣式

涉及到的特性：

transform-oragin

調(diào)整指針的初始位置以及旋轉(zhuǎn)的軸點(diǎn):transform-oragin

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

transform: rotate()

設(shè)置旋轉(zhuǎn)角度

transition

transition: all //0.05s;設(shè)置動畫時間為0.05秒

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

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

JS代碼

獲取秒針、分鐘、小時節(jié)點(diǎn)

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

獲取當(dāng)前時間秒、分、小時

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;

根據(jù)角度設(shè)置樣式

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

設(shè)置定時器，每秒調(diào)用一次setDate函數(shù)

setInterval(setDate, 1000);
延伸思考

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

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

第一種

第二種

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

源碼下載

Github Source Code

社群品牌：從零到壹全棧部落
定位：尋找共好，共同學(xué)習(xí)，持續(xù)輸出全棧技術(shù)社群
業(yè)界榮譽(yù)：IT界的邏輯思維
文化：輸出是最好的學(xué)習(xí)方式
官方公眾號：全棧部落
社群發(fā)起人：春哥(從零到壹創(chuàng)始人，交流微信：liyc1215)
技術(shù)交流社區(qū)：全棧部落BBS
全棧部落完整系列教程：全棧部落完整電子書學(xué)習(xí)筆記
關(guān)注全棧部落官方公眾號，每晚十點(diǎn)接收系列原創(chuàng)技術(shù)推送

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/84095.html

相關(guān)文章

  • JavaScript 30 - 一起做一次了不起的挑戰(zhàn)

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

    1treeS 評論0 收藏0

  • Java 時間與日期處理

    摘要：時間與日期處理從屬于筆者的現(xiàn)代開發(fā)系列文章，涉及到的引用資料聲明在學(xué)習(xí)與實踐資料索引中。可以通過靜態(tài)構(gòu)造方法很容易的創(chuàng)建，定義了與之間的轉(zhuǎn)化關(guān)系時差類以年月日來表示日期差，而以秒與毫秒來表示時間差適用于處理與機(jī)器時間。 Java 時間與日期處理 從屬于筆者的現(xiàn)代 Java 開發(fā)系列文章，涉及到的引用資料聲明在 Java 學(xué)習(xí)與實踐資料索引中。 Java 時間與日期處理 在 Java 8...

    HelKyle 評論0 收藏0

  • java 8 時間類之徹底看懂 java.time.temporal.ChronoField

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

    lentrue 評論0 收藏0

  • 20 個案例教你在 Java 8 中如何處理日期和時間?

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

    Rango 評論0 收藏0

  • 2-datetime 模塊

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

    LancerComet 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<