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

前言

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

电子时钟

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

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

posted @ 2020-04-27 21:57  by-sknight  阅读(2898)  评论(0编辑  收藏  举报