计时器也是生活中经常使用的功能，比如锻炼身体、跑步比赛等相关活动。我们使用Javascript来完成一个计时器。

计时器主要是对时间的逻辑处理。例如，60秒等于1分钟，60分钟等于1小时。我们这里只处理小时。就是这样一个简单的逻辑，然后在一个Input中动态显示出来。

现在让我们完成这个界面。

timer :/labe input type=' text ' label=' id=' timer '/Button onclick=' pause(this)' ID=' pause ' state=' on ' pause/Button onclick=' restart()' restart/Button为标记元素赋予一个ID以获取其中的标记，然后添加两个click事件，计数器的暂停和restart事件。

首先我们完成开始计时的处理，主要是用setInterval的方法，其中每1秒执行一次，这样我们就可以处理时间，就像我们开头说的，60秒等于1分钟.所以我们这里需要用判断来处理它，最后在输入框中显示得到的秒、分、小时。

var ele _ timer=document . getelementbyid(' timer ')；var n _ sec=0；//sec var n _ min=0；//分钟var n _ hour=0；//小时//60秒===1分钟//60分钟===1小时函数timer(){ return set interval(function(){ var str _ sec=n _ sec；var str _ min=n _ minvar str _ hour=n _ hourif(n _ sec 10){ str _ sec=' 0 ' n _ sec；} if(n _ min 10){ str _ min=' 0 ' n _ min；} if(n _ hour 10){ str _ hour=' 0 ' n _ hour；} var time=str _ hour ' : ' str _ min ' : ' str _ sec；ele_timer.value=时间；n _ secif(n _ sec 59){ n _ sec=0；n _ min} if(n _ min 59){ n _ sec=0；n _小时；} }, 1000);} var n _ timer=timer()；我们使用timer方法包装setInterval方法，以便稍后暂停和重新启动处理。当用户点击暂停时，计时器停止计数，用户继续点击此按钮，计时器继续计数。因此，这里有一个需要控制的状态，我们在这个状态下给这个按钮一个属性。

//暂停和继续功能暂停(self) {var state=self。getattribute(' state ')；if(state===' on '){ clearInterval(n _ timer)；Self.textContent=' continueself.setAttribute('state '，' off ')；} else { n _ timer=timer()；Self.textContent=“暂停”；self.setAttribute('state '，' on ')；}}最后，我们来看看重启。重启事件更简单。将计数器清零，然后更改暂停按钮的初始状态。

函数restart(){ clearInterval(n _ timer)；n _ sec=0；n _ min=0；n _ hour=0；n _ timer=timer()；var ele _ pause=document . getelementbyid(' pause ')；Ele _ pause.textContent=' pauseele_pause.setAttribute('state '，' on ')；}

这就完成了计时功能。效果如下。

希望这篇文章对大家学习javascript编程有所帮助。