简单计时器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
div{height:200px;width:200px;border:1px solid #000;text-align: center;font:30px/200px "";margin:100px auto;}
input{display:block;width:200px;height:50px;border:1px solid #000;text-align: center;margin:0 auto;}
</style>
<body>
<div id ="box">4</div>
<input type="button" id="btn" value="开始"/>
</body>
<script>
var btn = document.getElementById("btn");
var box = document.getElementById("box");
var type = 0;
var num = box.innerHTML;
var b = box.innerHTML;
var s;
btn.onclick =function(){
if(type == 0){
clearInterval(s);
s = setInterval(function(){
if(num == 1){
num="结束了";
clearInterval(s);
btn.value="复位";
type =2;
}else{
num--;
}
box.innerHTML = num;
},1000);
btn.value="暂停";
type = 1;
}else if(type === 1){
clearInterval(s);
type = 0;
btn.value="继续";
}else{
num = b;
box.innerHTML = b;
btn.value="开始";
type =0; //这个是复位后重复执行
}
}
</script>
</html>
