[JS] 使用JavaScript实现最简单的电子时钟

Posted 2021-02-21 by_sknight

前言

学习教材：学习javascript时，使用的书是《Head First JavaScript 程序设计》，这本书是一本 JavaScript 的入门书，主要覆盖了 JavaScript 的基础知识以及一些高级功能的概念，当然，为了解释清楚这些高级功能，实例也是有的，不过都是比较浅显易懂的类型，更多的是教会了 JavaScript 的必备知识点，对于一些常用的一些方法之类的更多的只是提了一下，并没有涉及到更多的实战。
为了掌握这些知识点，必要的练习还是必不可少的，最简单实用的练习就是模拟电子时钟了。
实现过程参考了使用JavaScript製作一個簡單時鐘，同时在大佬的博客中也发现了一个神奇的网站codePen，这个网站是一个在线的前端编辑器，并且还可以将其嵌入博客之中，具体的操作见codepen学习，最后一步的时候，选择 iframe 的选项，复制粘贴就可以在博客园中使用了， html 选项在博客园使用会出现提示让去他们网站，不知道是为什么，手写的 HTML 文件可以使用它，但是用在博客里面就会提示跳转。

电子时钟

PC端可以直接看见内容，手机端需要点击Result，才能看到最终的成品

思路很简单，从系统获取当前的时间，取出需要的内容（时、分、秒），对他们进行格式化处理（小于10的数前面补0），然后将其内容组合成为一个字符串，重新写到 HTML 的对应元素中。每隔500ms重复一次之前的工作就可以了。