前端設計-JavaScript簡單數字時鐘開發實例

簡單數字時鐘開發實例

藉助於JavaScript window對象所提供的計時觸發函數setInterval可以實現前端動畫效果的設計與製作。本例主要以setInterval方法為基礎介紹簡單數字時鐘的開發實例。

01所需素材

本數字時鐘設計實現格式為00：00：00類型結構的數字時鐘，因此需要準備時鐘顯示相關數字及間隔符號的素材。最終實現效果如下所示：

最終設計效果

設計實現效果如上圖，因此需要準備0-9數字與":"字符，素材設計較為簡單直接採用PhotoShop進行設計最終導出保存為png格式圖片，素材圖片展示如下：

素材圖片

02設計思路

動態數字時鐘整體設計按照顯示格式要求，使用div展示每一位數字或者間隔符。在計時周期內調用處理函數獲取系統當前的時間，並根據當前時間計算出每一個div中應當展示的內容，最終實現時鐘的動態效果。主要設計階段如下：

1、整體HTML頁面布局設置

這個階段主要完成時鐘構成的8個DIV的布局設計，為下一步顯示時鐘提供基礎。本例DIV整體布局設計樣式效果如下：

時鐘布局層

時鐘基本布局層描述如上圖，為展示我們將其背景設置了不同顏色，後期在8個DIV塊中我們用於顯示時鐘相關數字及字符。

2、ID選擇器DIV背景設置

本例中數字時鐘數字與字符通過設置為DIV層的背景用於實現展示。本例使用ID選擇器用於實現0-9數字與間隔符的展示。由於我們數字時鐘相關素材都在統一圖片中，因此我們在設置展示數字與字符的過程中需要對每一個樣式中的背景截取位置通過background-position屬性進行精確控制。完成9個數字與一個分隔符樣式定義之後，可以將8個時鐘顯示DIV設置對應的ID標籤，實現內容展示，如我們將以上時鐘布局DIV標籤全部設置為展示數字0的ID標籤，效果如下：

ID標籤控制顯示內容

ID標籤控制DIV顯示內容如上圖所示，這樣我們就可以分別設置8個DIV層的ID標籤值實現內容的改變，如我們使用8對應的ID設置，則全部顯示數字8，效果如下：

ID標籤值對應數字8顯示效果

在實際實現中由於8個DIV結構是固定的，包含了兩個分割符號，這部分可以直接設置為分割符號，如下所示：

帶有分割符號的8位顯示效果

3、時間獲取與處理

該數字時鐘時間通過JavaScript提供的Date對象的實例化，獲取本地的時間。然後從時間數據中分別讀取出小時、分鐘、秒。所使用函數主要包括以下函數：

getHours();//用於獲取時間對象中的小時數，取值範圍0-23；

getMinutes();//用於獲取時間對象中的分鐘數，取值範圍0-59；

getSeconds();//用於獲取時間對象中的秒數，取值範圍0-59；

在獲取系統時間對應的小時、分鐘、秒之後需要確定各部分其中的每一位，由於我們時鐘格式是固定的，每一部分均為兩位，因此需要對10以內的數字進行判斷，如小於10則需要單獨補充最高位的0，如果大於等於10，則需要取出其中的十位與個位。個位取值較為簡單用獲取的值除以10取餘數即為個位，十位數字將獲取值除以10之後向下取值則可獲取10位數字。如數字35，十位計算可得3，個位餘數為5。

4、設置DIV層對應的ID標籤

在分別獲取小時、分鐘、秒對應的每一位之後，可以進一步將其設置顯示在對應DIV層中，即設置層的背景。要解決這個問題需要能夠精確獲取每一個DIV層。藉助Document對象我們可以獲取所有的層，本例我們將8個展示時鐘層，外部嵌套一個層。使用getElementById方法獲取該元素，通過該元素的childNodes屬性以數組形式獲取內部所有的DIV層。這樣可以通過數組對應下標分別表示每一個時鐘DIV。注意問題獲取的全部子節點除顯示時鐘的元素節點之外還有文本節點，需要確定哪些是對應的DIV元素節點。使用console.log輸出該數組就可以確定，數組輸出如下：

子節點列表

在該列表中我們可知對應案例編寫代碼，1，3為小時對應的2個DIV；7，9為分鐘對應的2個DIV；13，15為秒數對應的DIV。數組下標確定後就可以獲取對應的Div元素使用setAttribute()方法，實現ID屬性的設置。

5、計時器設計

為保證能夠動態獲取本地時間，並將其處理顯示的對應DIV層中，需要使用window對象提供的setInterval(func,time)方法，定義觸發周期及處理函數。考慮到間隔符號閃爍，我們設置觸發之後為500毫秒。在觸發函數中實現系統時間獲取及與時鐘DIV關聯動態改變各DIV的ID屬性。

03實現核心代碼及效果展示

按照以上設計思路，我們可以完成該案例開發，案例圖片處理使用PhotoShop CC2019，代碼編輯使用SublimeText。實現過程主要包括頁面布局設計實現與JavaScript腳本編寫的實現。其中頁面布局設計使用DIV嵌套實現，代碼如下：

頁面DIV布局

頁面DIV布局代碼如上圖所示，其中我們可以看到在初始狀態下除間隔符dd標籤之外，其他的數組部分都為d0，即我們設置的數字0展示。我們為調用背景素材實現背景展示，分別定義了d0~d9用於展示數字，dd標籤用於顯示間隔符，ds標籤用於隱藏間隔符。該部分樣式代碼如下：

時鐘數字與間隔符樣式設置

JavaScript腳本部分主要用於獲取系統時間，動態實現前端8個展示時鐘的DIV層ID標籤的設置。在窗體的onload時間中我們獲取所有的時鐘DIV元素，並啟動計時器。實現代碼如下：

頁面加載事件

頁面加載事件如上圖所示，其中回調函數setVal用於實現接收本地事件進行DIV層ID標籤設置。該函數實現代碼如下：

回調函數

處理函數代碼如上圖所示，自定義函數主要用於實現設置小時、分鐘與秒對應的DIV層ID屬性值，實現數字與間隔符切換。其中小時處理函數setH()代碼描述如下：

小時處理函數代碼

其他代碼處理與此類似，只是在處理完數字之後設置的nodes元素不同，這裡的nodes對象存儲了外層ID為test的DIV所有子元素。由於篇幅限制，其他函數不再一一說明。如需完整代碼請關注後私信。本例最終實現效果展示如下圖：

動態展示效果

本百家號長期關注編程資訊分享；編程課程、素材、代碼分享及編程培訓。如果您對以上方面有興趣或代碼錯誤、建議與意見，可在評論區回復。更多程序設計相關教程及實例分享，期待大家關注與閱讀！相關文章連結如下：

前端設計-JavaScript中父窗口與子窗口間的通信

前端設計-JavaScript實現Node節點的遍歷

快速學會如何使用CSS關係組合選擇器

一文快速讀懂CSS選擇器之屬性選擇器