js是什么課程 js課程總結 _js課程總結

文章插圖

文章插圖
借助于JavaScript window對象所提供的計時觸發函數setInterval可以實現前端動畫效果的設計與制作。本例主要以setInterval方法為基礎介紹簡單數字時鐘的開發實例。
所需素材
本數字時鐘設計實現格式為00：00：00類型結構的數字時鐘，因此需要準備時鐘顯示相關數字及間隔符號的素材。最終實現效果如下所示：
數字時鐘實現效果
設計實現效果如上圖，因此需要準備0-9數字與”:”字符，素材設計較為簡單直接采用PhotoShop進行設計最終導出保存為png格式圖片，素材圖片展示如下：
數字及間隔符素材
設計思路
動態數字時鐘整體設計按照顯示格式要求，使用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-23getMinutes();//用于獲取時間對象中的分鐘數，取值范圍0-59getSeconds();//用于獲取時間對象中的秒數，取值范圍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屬性。
實現核心代碼及效果展示
按照以上設計思路，我們可以完成該案例開發，案例圖片處理使用PhotoShop CC2019，代碼編輯使用SublimeText 。實現過程主要包括頁面布局設計實現與JavaScript腳本編寫的實現。其中頁面布局設計使用DIV嵌套實現，代碼如下：
【js是什么課程 js課程總結】頁面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所有子元素。