本文主要详细介绍用javascript实现定时器的简单方法。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。
定时器也是生活中经常使用的功能，比如锻炼、跑步等相关活动。我们使用Javascript来完成一个定时器。
定时器主要是对时间的逻辑处理。比如60秒等于1分钟，60分钟等于1小时。我们这里只做小时处理。就是这么简单的逻辑，然后动态的显示在一个输入里。
现在我们来完成这个界面。
计时：/标签
输入类型='text' name='' id='timer'/
按钮onclick=' pause(this)' id=' pause ' state=' on ' pause/按钮
button onclick=' restart()' restart/button
为tag元素提供一个ID以获取标记，然后添加两个click事件、计数器的暂停和重新启动事件。
首先，我们来完成启动计时的处理。setInterval的方法主要是用来开始计时的，其中方法是每一秒执行一次，这样我们就可以对时间进行处理，就像开头提到的60秒等于一分钟一样.所以这里需要用判断来处理。最后，从中获得的秒、分和小时显示在输入框中。
var ele _ timer=document . getelementbyid(' timer ')；
var n _ sec=0；//秒
var n _ min=0；//最小值
var n _ hour=0；//小时
//60秒===1分钟
//60分钟===1小时
函数计时器(){
return setInterval(function () {
var str _ sec=n _ sec
var str _ min=n _ min
var str _ hour=n _ hour
if ( 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=time
n _ sec
if (n_sec 59){
n _ sec=0；
n _ min
}
if (n_min 59) {
n _ sec=0；
n _ hour
}
}, 1000);
}
var n _ timer=timer()；
我们用timer方法包装setInterval方法，以便稍后暂停和重新启动处理。
当用户点击暂停时，计时器停止计时，用户继续点击这个按钮，计时器继续计时。所以有一个状态要控制，我们给这个按钮一个这个状态的属性。
//暂停并继续
功能暂停(自我){
var state=self . get attribute(' state ')；
if (state==='on') {
clear interval(n _ timer)；
Self.textContent=' continue
self.setAttribute('state '，' off ')；
}否则{
n _ timer=timer()；
Self.textContent=' pause
self.setAttribute('state '，' on ')；
}
}
最后，我们来看看重启。重启事件甚至更简单。将计数器清零，然后更改暂停按钮的初始状态。
函数restart() {
clear interval(n _ timer)；
n _ sec=0；
n _ min=0；
n _ hour=0；
n _ timer=timer()；
var ele _ pause=document . getelementbyid(' pause ')；
Ele _ pause.textContent=' pause
ele_pause.setAttribute('state '，' on ')；
}
这就完成了计时的功能。效果如下
希望这篇文章对你学习javascript编程有所帮助。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。