单片机定时器实验两位倒计时秒表_HTMLJavaScript | 简易网页秒表制作

本期技术贴小E教大家如何用HTML和JavaScript来简单的制作一个网页上的秒表。

大致效果是这样的：

要求是点击开始会让秒表开始计时，点击暂停按钮时暂停，点击复位按钮时，上面数字全部归零。

下面让我们一起来学习一下如何操作吧~

HTML＆JavaScript .

首先是先用HTML把秒表的大致外观写出来，下面是代码：

接下来是JavaScript的部分了我们在末尾写上

首先我们用var定义几个变量：

这里我们要注意先把定时器清零,以防后面出现一些不可描述的问题。

接下来我们写几个个function函数来定义我们的点击事件：

这里有个函数：

    timer = setInterval(function () {  },10)

意思是每10毫秒重复一次大括号内的函数，然后在这个大括号内i++表示i=i+1，每10毫秒i就会加一，至于为什么要是10毫秒而不是100毫秒1000毫秒呢，是因为上面显示那个地方“：”号后面是两位，如果是100毫秒那就只有一位了。

clearInterval(timer)这个函数是把计时器暂停掉，但注意他不是把计时器移除掉，移除计时器是timer=null，这个函数会让系统把计时器回收掉，也就是无法恢复了。

写到这儿，计时器就可以运行了，下面是运行效果。

点击边框调出视频工具条 

大家有没有发现这儿时间总是跳动的不好看，这是因为我们之前在写代码的时候，并没有告诉网页，这儿该怎么去把他这个缺失的零补上。下面是几行代码实现一下补零的操作。

这儿就指的是当数字小于10，我们就把这个数字前面加上个0，然后返回这个加上了0的值，上面的代码也需要小改一下，在显示数字那个地方套上我们新写的这个函数。

下面来看看效果：

点击边框调出视频工具条 

本期技术贴教学到这里就结束啦~

怎么样大家学会没有呢？

END

执行编辑 | 张乐雯

责任编辑 | 于文博