[JS] 使用JavaScript實現最簡單的電子時鍾


前言

學習教材:學習JavaScript時,使用的書是《Head First JavaScript 程序設計》,這本書是一本 JavaScript 的入門書,主要覆蓋了 JavaScript 的基礎知識以及一些高級功能的概念,當然,為了解釋清楚這些高級功能,實例也是有的,不過都是比較淺顯易懂的類型,更多的是教會了 JavaScript 的必備知識點,對於一些常用的一些方法之類的更多的只是提了一下,並沒有涉及到更多的實戰。
為了掌握這些知識點,必要的練習還是必不可少的,最簡單實用的練習就是模擬電子時鍾了。
實現過程參考了使用JavaScript製作一個簡單時鐘,同時在大佬的博客中也發現了一個神奇的網站codePen,這個網站是一個在線的前端編輯器,並且還可以將其嵌入博客之中,具體的操作見codepen學習,最后一步的時候,選擇 iframe 的選項,復制粘貼就可以在博客園中使用了, HTML 選項在博客園使用會出現提示讓去他們網站,不知道是為什么,手寫的 HTML 文件可以使用它,但是用在博客里面就會提示跳轉。

電子時鍾

PC端可以直接看見內容,手機端需要點擊Result,才能看到最終的成品

思路很簡單,從系統獲取當前的時間,取出需要的內容(時、分、秒),對他們進行格式化處理(小於10的數前面補0),然后將其內容組合成為一個字符串,重新寫到 HTML 的對應元素中。每隔500ms重復一次之前的工作就可以了。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM