国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

Day02 - JavaScript + CSS Clock

zzbo / 2864人閱讀

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

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

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

效果如下：

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

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

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

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

頁(yè)面布局
CSS樣式

涉及到的特性：

transform-oragin

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

transform-oragin: 100%; //初始化使三個(gè)指針全部指向12時(shí)

transform: rotate()

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

transition

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

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

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

JS代碼

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

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

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

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

計(jì)算秒、分、小時(shí)角度

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è)置定時(shí)器，每秒調(diào)用一次setDate函數(shù)

setInterval(setDate, 1000);
延伸思考

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

要解決這個(gè)問(wèn)題，目前找到了兩種解決辦法：

第一種

第二種

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

源碼下載

Github Source Code

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/84095.html

相關(guān)文章

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

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

    1treeS 評(píng)論0 收藏0

  • Java 時(shí)間與日期處理

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

    HelKyle 評(píng)論0 收藏0

  • java 8 時(shí)間類之徹底看懂 java.time.temporal.ChronoField

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

    lentrue 評(píng)論0 收藏0

  • 20 個(gè)案例教你在 Java 8 中如何處理日期和時(shí)間?

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

    Rango 評(píng)論0 收藏0

  • 2-datetime 模塊

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

    LancerComet 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<