這是一個(gè)利用HTML5編寫的簡(jiǎn)單的秒表停团，具有開始旷坦、暫停和停止三個(gè)功能鍵。
（千鋒教育中講的一個(gè)案例佑稠。）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#div1{
width:300px;
height:400px;
background-color: darkgrey;
margin:100px auto;
text-align:center;
color: white;
}
#count{
width:200px;
height: 150px;
line-height:150px;
margin:auto;
font-size: 40px;
}
#div1 input{width:150px; hight:40px; background-color:dodgerblue; color: white; font-size: 25px; margin-top:20px}
</style>
<script type="text/javascript">
//可以將查找標(biāo)簽節(jié)點(diǎn)的操作進(jìn)行簡(jiǎn)化
function $(id){
return document.getElementById(id)
}
window.onload = function(){
//點(diǎn)擊開始計(jì)數(shù)
var count = 0;//開始計(jì)數(shù)以后秒梅，累加的總秒數(shù)
var timer = null;
$("start").onclick = function(){
timer = setInterval(function(){
count++;
//需要改變當(dāng)前頁面上時(shí)分秒的值
$("id_S").innerHTML = showNum(parseInt(count %60));
$("id_M").innerHTML = showNum(parseInt(count / 60) %60);
$("id_H").innerHTML = showNum(parseInt(count / 3600));
},1000)
}
//暫停
$("pause").onclick = function(){
//取消定時(shí)器
clearInterval(timer);
}
//停止計(jì)數(shù) 數(shù)據(jù)清零 對(duì)數(shù)據(jù)清零，對(duì)頁面上展示的數(shù)據(jù)清零
$("stop").onclick = function(){
//取消定時(shí)器
clearInterval(timer);
//數(shù)據(jù)清零 總秒數(shù)清零
count = 0;
//頁面展示清零
$("id_S").innerHTML = "00";
$("id_M").innerHTML = "00";
$("id_H").innerHTML = "00";
}
}
//處理單個(gè)數(shù)字
function showNum(num){
if(num < 10){
return "0"+ num;
}else{
return num;
}
}
</script>
</head>
<body>
<div id="div1">
<div id="count">
<span id="id_H">00</span>:
<span id="id_M">00</span>:
<span id="id_S">00</span>
</div>
<input type="button" id="start" value="開始" />
<input type="button" id="pause" value="暫停" />
<input type="button" id="stop" value="停止" />
</div>
</body>
</html>
最后運(yùn)行出的頁面展示:
秒表.png
開始鍵舌胶，開始計(jì)時(shí)捆蜀。
暫停鍵，暫停計(jì)時(shí)幔嫂。
停止鍵辆它，暫停計(jì)時(shí)并清零。
