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嵌套實現 ， 代碼如下：
頁面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所有子元素 。
【js課程設計做什么 javascript程序設計基礎教程】
推薦閱讀
- 5000元炒原油賺了十萬 做原油把錢虧光了想死
- 感冒期間做核酸檢測有用嗎
- 感冒了做核酸檢測有問題嗎
- 感冒了能做核酸檢測報告嗎
- 感冒期間核酸檢測會誤診嗎
- 感冒期間核酸檢測準嗎
- 手機上怎么查詢核酸檢測結果
- 大規模核酸檢測可以出行嗎
- 出行必須做核酸檢測嗎
- 核酸檢測健康碼上不顯示怎么辦