<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>TimePiece</title>
<script>
//创建标识值
var Intervalid = null;
window.onload = function () {
//获取start的dom
var start = document.getElementById("start");
//设置点击事件
start.onclick = function () {
//判断标识值是否为空
if (Intervalid == null) {
//使用setInterval方法不断调用funstart方法
Intervalid=setInterval(funstart, 1000);
}
//开始后设置暂停、结束可以使用 开始不可以使用
pause.disabled = false;
stop.disabled = false;
start.disabled = true;
}
//获取pause的dom
var pause = document.getElementById("pause");
pause.onclick = function () {
//移除Intervalid方法
clearInterval(Intervalid);
//将标识值设为空
Intervalid = null;
//开始可以使用
start.disabled = false;
}
//获取stop的dom
var stop = document.getElementById("stop");
stop.onclick = function () {
//移除Intervalid方法
clearInterval(Intervalid);
//将标识值设为空
Intervalid = null;
//将value的dom中的值初始化为0
document.getElementById("value").innerHTML = 0;
//结束、暂停不可使用
stop.disabled=true;
pause.disabled=true;
}
}
function funstart() {
//得到当前值
var value = document.getElementById("value").innerHTML;
//把当前值转换成int类型
var intValue = parseInt(value);
//把当前值++再赋值
var newValue = ++intValue;
//把值显示到div中
document.getElementById("value").innerHTML = newValue;
}
</script>
</head>
<body>
<div style="width:200px;border:1px solid #ff6a00;text-align:center;margin:0 auto">
<div>
<input type="button" name="start" id="start" value="开始" />
<input type="button" name="pause" id="pause" value="暂停" disabled />
<input type="button" name="stop" id="stop" value="结束" disabled />
</div>
<div id="value" style="font-family:SimHei;font-size:38px;font-weight:900">0</div>
</div>
</body>
</html>