<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box{width: 300px;height: 400px;border: 3px solid black; background-color: burlywood;margin: 50px auto;}
button{width: 100px;height: 50px; background-color: black;color: white;margin: 30px auto;display: block;}
#box1{text-align: center;margin-top: 30px;font-size: 50px;}
</style>
<script>
function $(id){
return document.getElementById(id);
}
var i = 0;
var timer = null;
var isRunning = false;
window.onload = function(){
function start(){
timer = setInterval(function(){
i++
$("sec").innerHTML = scc(i % 60);
$("min").innerHTML = scc(parseInt(i / 60) % 60);
$("hour").innerHTML = scc(parseInt (i / 3600));
},1000)
}
function end(){
clearInterval(timer);
}
$("bt1").onclick = function(){
if(!isRunning){
$("bt1").innerHTML = "暂停";
isRunning = true;
start();
}else{
$("bt1").innerHTML = "开始";
isRunning = false;
end();
}
}
$("bt3").onclick = function(){
clearInterval(timer);
i = 0;
$("bt1").innerHTML = "开始";
$("sec").innerHTML = "00";
$("min").innerHTML = "00";
$("hour").innerHTML = "00";
}
}
function scc(n){
if(n < 10){
return "0" + n;
}else
return n;
}
</script>
</head>
<body>
<div id="box">
<div id="box1">
<span id="hour">00</span>
<span>:</span>
<span id="min">00</span>
<span>:</span>
<span id="sec">00</span>
</div>
<button id="bt1">开始</button>
<!-- <button id="bt2">暂停</button> -->
<button id="bt3">复位</button>
</div>
</body>
</html>
我认为inRunning只是人为的语义化标签，上面代码中说它的真假代表秒表的启动与停止；但是我认为它只是用于对
$("bt1").onclick = function(){
if(!isRunning){
$("bt1").innerHTML = "暂停";
isRunning = true;
start();
}else{
$("bt1").innerHTML = "开始";
isRunning = false;
end();
}
这段代码是否运行start和end函数的一个工具，其实它本身不代表什么，但是为什么当我注释掉 isRunning = false; isRunning = true的时候它无法正常运行，这是为什么？？？
