JavaScript是一种非常容易使用的脚本语言，它有很多工具和强大的功能。因为一直是后端关系，作者目前也只是学一点。

接下来，让我们进入——定时器。先说说定时器：的功能。

1.计时器应该能够在页面上显示时间。

2.计时器每秒刷新一次，每秒刷新60分钟，每分钟刷新60小时。

3.计时器需要能够重置，即重新计时。

4.计时结束，需要有一个获取计时时间的方法。

以上功能都很简单，定时器也要有暂停和继续定时器的功能。没关系，我们一个一个来。

第一步：

让我们制作一个简单的页面，带有一个实时标签和两个按钮，开始和暂停。页面绘制如下：

不要花太多时间在一个页面上，只是帮你写第一段代码，练练手~

第二步：

让我们分析一下计时器需要哪些属性：

1.计时，需要开始计时。

2.结束时间

3.花了多长时间？该属性将返回给用户。

4.显示实际上是jquery对象或dom对象，时间显示在一个地方。

5.展览时间需要拆解，所以我们有小时属性。

6.分钟属性。

7.第二个属性(事实上，它包含在总时间中，所以首先记住它，以防您需要它)。

让我们看看代码：

var startTime//开始时间变化结束时间；//结束时间变化时间长度；//总时变时间跨度；//定时器运行时间变化显示器；//时间显示var hh=0；//小时var mm=0；//分钟var状态=0；//乍一看计时状态似乎有几个属性，因为JavaScript的setTimeout方法会用于计时，计时会返回一个对象，我们可以用这个对象来清除setTimeout。

第三步：

让我们分析一下计时器需要哪些方法：

1.计时器需要启动，所以我们有一个启动方法。

2.计时器需要停止，所以我们有一个停止方法。停止后，我们应该告诉用户已经计数了多长时间，所以我们应该返回时间。

3.计时器还应具有暂停功能。暂停后，定时器可以在暂停位置再次启动，暂停也应该返回持续时间。

4.在启动和停止的时候，每秒应该还有一个计时器的内部活动，类似于委托方法，每秒执行一次。

5.呈现逻辑上，我们要把实时展现给页面上的显示器，并且做一些可读性更好的格式转换。

代码，构造函数：

函数createTimer(_startTime，_endTime，_timeLength，_ displayer){ start time=_ start time；//开始时间endTime=_ endTime//结束时间timeLength=_ timeLength//总时长显示器=_ displayer//时间显示hh=0；//小时mm=0；//分钟状态=0；//定时器状态}定时器启动：

var start=function(){ hh=0；mm=0；开始时间=新日期()；status=setTimeout(节拍，1000)；}计时结束：

var stop=function(){ cleartime out(状态)；endTime=新日期()；time length=parsent((end time-start time)/1000)；警报(时间长度)；}计时器每秒的内部活动：

var beat=function(){ end time=new Date()；timeSpan=parsent((end time-start time)/1000)；显示器[0]。innerHTML=check time(timeSpan)；status=setTimeout(节拍，1000)；}为了在上图中显示00:00:00，我们需要一个呈现逻辑。

var CheckTime=function(len){ len=len-mm * 60；if(len=60){ this . mm；//starttime1=新日期()；len=0；} mm=mm-hh * 60；if(mm=60){ hh；mm=0；}返回j(self . hh)' : ' j(mm)' : ' j(len)；} var j=函数(arg){ return arg=10？arg :“0”arg；}我们启动了计时器，这个简单的计时器开始运行_。

是不是少了什么：计时器不可能没有停顿？当我想到这一点时，我没想到会有暂停功能。我看着它每一秒都在跳动。很傻。直到业务需要我才想到，所以我不得不增加这个功能。

没关系，我们继续设计，在演示页面增加一个暂停按钮：P。

首先分析：

1.暂停后，我们必须在上次暂停的节点上重新启动。我们在start按钮中做这个功能，所以我们需要一个标识位来判断暂停后是重启还是启动。

2.我们需要记录暂停的时间点。

3.暂停的时间间隔要记录并使用，否则再次启动时，时间会在间隔后立即跳转(例如暂停时为00:0:09，暂停一分钟后，如果不调整直接启动，时间会变成00336001:09)。

所以我们增加了三个属性：

var isParse=false//是否挂起var parseTime//暂停时间点var interval time=0；//暂停间隔暂停方法：

var parse=function(){ parse time=new Date()；isParse=trueclearTimeout(状态)；}覆盖开始方法和渲染方法：

var start=function(){ if(！isParse){ startTime=new Date()；开始时间1=开始时间；hh=0；mm=0；开始时间=新日期()；status=setTimeout(节拍，1000)；} else { interval time=parseInt((interval time(new Date()-parseTime)/1000))；starttime1=startTimestatus=setTimeout(节拍，1000)；} } var checkTime=function(len){ len=len-mm * 60-interval time；if(len=60){ mm；len=0；} mm=mm-hh * 60；if(mm=60){ hh；mm=0；}返回j(hh)' : ' j(mm)' : ' j(len)；}以上，搞定，我们的定时器有暂停功能~

看代码概述，核心代码不到一百行。

至此，主要工作完成。其实也可以封装。使用原型，所有的方法都被附加到一个对象上。实例化计时器对象并初始化一些关键属性后，这些方法可以由对象调用。这里就不细说了。感兴趣的童鞋可以试试~