本篇经验主要讲述如何使用JS输出动态时间。我们在做一些实时性的页面时，会希望在页面中能够呈现当前时间。那么我们应该如何实现这个效果呢？接下来让我们一起来看一下吧。
工具/原料
HBuilder
一台电脑
方法/步骤
1、首先打开我们的HBuilder，点击新建项目，在弹出的对话框中填写好项目名称，选择好文件保存的位置。然后在下面的模板中选择基础HTML项目。如下图所示。
2、我们在左侧的项目目录中点击index.html文件。
3、接下来我们开始写代码，首先我们写一个<label>标签，我们给标签一个id用于我们后续的定位。这个标签是用于输出我们的时间。如下图所示。
4、接下来我们开始写JS，首先写好我们的<script>标签。然后定义一个loc变量来定位我们的标签，并且定义一个用来调用我们的函数的变量time。如下图所示
5、然后开始做我们显示时间的函数showClock()。在该函数里首先定义好时间变量myDate，之后获取系统时间并将该时间输出到我们的loc变量里。
6、由于我们要使时间一直跳动，所以我们每隔1s调用一次showClock()。其中的1000的单位是毫秒。
7、那么一个动态时间就做好了，不过有时候我们希望在我们点击后，时间能够暂停，那么我们就还需要编写一个暂停时间的函数stopClock()。
8、接下来我们来分析一下，我们是使用的time变量来调出我们的时间，那么time没有成功调用的话，我们就重新调用一次。如果成功调用了，表示时间正在行走，那么我们就需要将它停下。如下图所示。
9、编写好stopClock()后，我们需要将它调用。这里我们使用<a>标签来实现。href属性值表示将该标签的js性质去除。然后在我们点击该标签时，调用我们的stopClock()函数。如下图所示。
10、我们在点击运行的时候发现，只有开关两个字，这是因为我们没有在页面刚加载出来的时候就调用我们的showClock()函数。我们可以在body标签里输入onload属性，这样在页面加载出来的时候就可以显示我们的时间了。
11、然后我们运行点击开关就可以显示和暂停时间啦。
