javascript毫秒计时器_JS制作计时器毫秒

1、需要一个放置计时器的容器以及控制按钮

这里我使用一个input框：

1

开始、暂停、重置三个按钮

开始

暂停

重置

2、js实现(不依赖任何插件)

//初始化变量

var hour,minute,second;//时 分 秒

hour=minute=second=0;//初始化

var millisecond=0;//毫秒

var int;

//重置函数

function Reset()

{

window.clearInterval(int);

millisecond=hour=minute=second=0;

document.getElementById('timetext').value='00时00分00秒000毫秒';

}

//开始函数

function start()

{

int=setInterval(timer,50);//每隔50毫秒执行一次timer函数

}

//计时函数

function timer()

{

millisecond=millisecond+50;

if(millisecond>=1000)

{

millisecond=0;

second=second+1;

}

if(second>=60)

{

second=0;

minute=minute+1;

}

if(minute>=60)

{

minute=0;

hour=hour+1;

}

document.getElementById('timetext').value=hour+'时'+minute+'分'+second+'秒'+millisecond+'毫秒';

}

//暂停函数

function stop()

{

window.clearInterval(int);

}

document.getElementById('timetext').innerHTML = minute + '分'

+ second + '秒' + millisecond / 10 + '毫秒';  直接输出到页面上  不需要input

高手到此为止，有疑问的继续

除了按钮触发的函数外，上面涉及到JavaScript两个很重要的函数：

setInterval函数方法可按照指定的周期(以毫秒计)来调用函数或计算表达式

上述代码中setInterval(timer,50)表示以50毫秒的间隔周期性的执行timer函数，也就是每隔50毫秒执行一次timer函数，一直继续。

当我们开始计时就调用setInterval(timer,50)函数来不停的执行timer函数，那么如何暂停呢？

clearInterval(id_of_setinterval)函数用来暂停setInterval的周期性执行，参数为setInterval(timer,50)函数返回的ID，即上述代码中的int

实际效果为：

当然了，可以根据需要应用到不同地方。