用JS制作一个简单的秒表

时间与我们生活息息相关，在日常生活中人们总以时间作为参考点对一些事情进行评比，例如各种运动就是通过选手们完成时间的多少进行排名的。而这些时间的计算往往就是依靠比较精准的秒表。现在我就为大家介绍一下如何用JS代码编写一个简单的秒表。

    页面代码很简单，通过两按钮和一个装时间的div组成，代码和页面就在这下面，可以参考一下。

    在编写功能之前要先定义几个必须要使用到的变量，一共四个，每次点击开始的时间、每次点击暂停的时间、运行总时间、计时器。变量需要在方法外面定义，方便全局使用。

    前面三个时间时计算秒显示到页面上的时间的必要数据，因为可以点击暂停和开始，这样中途可能会停留一段时间，如果不经过计算就会出现时间数据的不准确。从页面的代码可以看到，开始和暂停是同一个按钮，每次点击就会更换不同的功能。在这里是通过图标来判断是处于开始状态还是暂停状态。图标用的是layui里面的，如果i标签里有layui-icon-play这个类名就说明是处于暂停状态，如果有layui-icon-pause这个类名就说明是处于开始状态。这两个类名其实就是开始和暂停的样式。layui-icon-play是开始，layui-icon-pause是暂停。

 

 

 

当点击的开始结束按钮时，判断一下i标签里是否有layui-icon-play这个类名，如果有就说明点击前是属于暂停状态的现在需要变成开始状态，并且开始计时，就可以把layui-icon-play移除掉，添加layui-icon-pausess，否则如果没有就说明点击前是属于开始状态的现在需要变成暂停状态，并且结束计时，同样的需要把类名更换掉，只不过是反过来了，把layui-icon- pausess移除掉，添加layui-icon-play。

把样式转换了之后就要开始计算时间，计算时间前要判断点击暂停时的时间是否是大于0的，如果没有大于0就说明是第一次点击，所以运行的总时间是0，可以不做操作直接开始调用定时器。如果大于0就说明已经是暂停过一次以上了，总时间需要把暂停时的时间减去开始时的时间，得出上一次运行的总时间，然后依次累加计算出从一开始到现在的总运行时间。然后再获取当前点击的时间开始调用定时器。因为秒表的计算是精准到毫秒的，所以调用定时器时的间隔时间为一毫秒。

然后就是定时器调用的方法内容了，一进入到该方法时首先就要获取到当前时间，然后再用当前的时间减去开始的时间加上总时间，就能计算出本次的总时间了，再用这个时间计算出分钟、秒钟、毫秒等等。

       最后就处理字符，判断是否大于0，如果小于就把显示的文本设置为00，因为毫秒有三位数，所以设置为000。

       还有一个按钮就是重置，把所有的数据全部清空，恢复原样。