<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
function $(id)
{
return document.getElementById(id);
}
var i=0;
var timer=null;//记录定时器值
window.onload=function()
{
//写在这里的代码是页面加载完成后运行的
//不断的等待执行
$("start").onclick= function()
{
//定义定时器
timer=setInterval(function(){
i++;
$("sec").innerHTML=doubleNum(i%60);
$("min").innerHTML=doubleNum(parseInt(i/60)%60);
$("hour").innerHTML=doubleNum(parseInt(i/3600));
},1000);
}
$("stop").onclick= function()
{
clearInterval(timer);
}
$("reset").onclick= function()
{
clearInterval(timer);
i=0;
$("sec").innerHTML="00";
$("min").innerHTML="00";
$("hour").innerHTML="00";
}
}
function doubleNum(n)
{
if(n<10)
{
return "0"+n;
}
else
{
return n;
}
}
</script>
</head>
<body>
<div id="div1">
<span id="hour">00</span>
<span>:</span>
<span id="min">00</span>
<span>:</span>
<span id="sec">00</span>
<span>:</span>
</br>
<button id="start">start</button>
<button id="stop">stop</button>
<button id="reset">reset</button>
</div>
</body>
</html>
<Dom计时器应用-秒表>
最新推荐文章于 2022-05-18 12:38:31 发布