这是一个利用HTML5编写的简单的秒表，具有开始、暂停和停止三个功能键。
（千锋教育中讲的一个案例。）
<!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">
//可以将查找标签节点的操作进行简化
function $(id){
return document.getElementById(id)
}
window.onload = function(){
//点击开始计数
var count = 0;//开始计数以后，累加的总秒数
var timer = null;
$("start").onclick = function(){
timer = setInterval(function(){
count++;
//需要改变当前页面上时分秒的值
$("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(){
//取消定时器
clearInterval(timer);
}
//停止计数 数据清零 对数据清零，对页面上展示的数据清零
$("stop").onclick = function(){
//取消定时器
clearInterval(timer);
//数据清零 总秒数清零
count = 0;
//页面展示清零
$("id_S").innerHTML = "00";
$("id_M").innerHTML = "00";
$("id_H").innerHTML = "00";
}
}
//处理单个数字
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>
最后运行出的页面展示:
秒表.png
开始键，开始计时。
暂停键，暂停计时。
停止键，暂停计时并清零。
网友评论