秒表最核心的功能是計時。每個人的手機上都有秒表功能，打開手機就可以看到。我們可以看看手機上的秒表是怎么樣的。
手機上的秒表有分鍾和秒，有一個開始按鈕，點擊開始按鈕，秒表就開始計時，當秒走到59的時候，分鍾加1，秒歸零。
下面是實現這個功能的代碼。
<html>
<head>
<title>秒表</title>
<meta charset="utf-8">
<style>
*{
margin: 0;
padding: 0;
}
#container{
width:200px;
height: 180px;
background: #ccc;
text-align: center;
margin: 100px auto;
padding-top: 20px;
}
#container button{
margin-top: 20px;
}
</style>
</head>
<body>
<div id="container">
<p id="time">00:00</p>
<button id="start">開始</button>
</div>
<script>
//我需要兩個變量來分別存儲秒數和分鍾數
var second = 0;
var minute = 0;
//然后需要一個變量來存儲我的定時器
var int;
function timer(){ //聲明一個timer函數，在這個函數里實現我的功能。
second += 1; //秒數加1
if(second > 59){
second = 0; //當秒數大於59的時候，讓秒數重新歸零。
minute += 1; //分鍾數加1
}
//然后將秒和分鍾追加到dom里，為了保持00:00這樣的格式，我們需要做一些簡單的判斷
if(minute < 10){
document.getElementById('time').innerHTML = '0' + minute + ":0" + second;
if(second < 10){
document.getElementById('time').innerHTML = '0' + minute + ":0" + second;
}else{
document.getElementById('time').innerHTML = '0' + minute + ":" + second;
}
}else{
document.getElementById('time').innerHTML = minute + ":0" + second;
if(second < 10){
document.getElementById('time').innerHTML = minute + ":0" + second;
}else{
document.getElementById('time').innerHTML = minute + ":" + second;
}
}
}
//然后我創建一個定時器來執行timer函數，在js中，1000毫秒等於1秒。我可以讓這個定時器每隔1000毫秒執行一次timer函數。我想要的效果是點擊開始按鈕的時候再執行這個定時器。
//我可以把這個定時器放在一個函數里，在我點擊開始按鈕的時候運行這個函數即可。
function start(){
//在每次點擊開始按鈕時，我們需要先清除一下定時器，然后再執行定時器，原因是如果不清除，每次點擊開始按鈕，定時器都會累加，會導致計時越來越快的bug
clearInterval(int);
int = setInterval(timer,1000);
}
var startBtn = document.getElementById('start');
startBtn.onclick = function(){
start();
}
</script>
</body>
</html>
這樣，一個簡單的秒表計時功能就實現了。
當然，這里實現的只是一個秒表最最簡單最最基礎的功能。一個好的秒表還需要能夠暫停、能夠重置、能夠計次。在接下來我會把這些功能一點一點加上去。