js 定时网页点击_实现网页版时钟

我们学习软件开发后，总喜欢编写一些实用的工具程序，例如时钟、便签、聊天程序之类的。

用一般的开发工具，例如Java、Delphi、QT，编写这样的小工具其实挺费神，但如果我们使用Vue来开发，借助于浏览器来展示，就特别简单。

现在，我们使用Vue，实现一个网页版时钟。

1、需求定义

网页版时钟的需求比较简单，就是在网页上显示当前的时间，精确到秒，然后每秒刷新一下。

2、下载vue.min.js文件

由于头条比较忌讳在文章中带有站外网址，为了保证文章的完整性，我们先将vue.min.js文件下载到本地。

下载的方法：

(1)打开百度；

(2)输入“vue.min.js下载”；

(3)找到一个合适的网址，下载到本地即可。

3、代码实现

由于这个需求实在太简单了，直接给出网页时钟mini_clock.html的源码：

            mini_clock

当前时间：{{currentTime|formatCurrentTime}}

将vue.min.js和mini_clock.html文件放在同一个目录下，然后使用浏览器打开mini_clock.html文件，效果如下：

4、代码逻辑解释

(1)在脚本部分，建立了一个Vue对象showTime，这个Vue对象挂载在id为showTime的

元素上；

(2)data选项中定义的currentTime，用于实现双向绑定；

(3)过滤器formatCurrentTime用于将时间的格式变得更简单清晰；

(4)Vue对象挂载时，启动一个定时器，这个定时器用于刷新currentTime的值；

(5)Vue对象即将销毁前，清理掉启动的定时器。

5、后记

这个网页时钟HTML非常简陋，但是我个人挺喜欢的，偶尔会打开它，用于非精确计时。

如果你希望这个程序更加精美，可以加上一些图形元素，让网页时钟用起来更炫。