1、HTML部分
<div id="div1"> <span id="hour">00</span> <span>:</span> <span id="min">00</span> <span>:</span> <span id="sec">00</span> <br /> <button id="start">开始</button> <button id="reset">复位</button> </div>
2、css部分
#div1 { width: 100px; height: 200px; padding: 50px; background-color: orange; border: 1px solid #000000; margin: auto; } span{ font-size: 20px; } #div1 button{ width: 100px; height: 30px; font-size: 16px; margin-top: 20px; background-color: black; color: white; }
3、JavaScript部分
function $(id) { return document.getElementById(id); } var i = 0; var timer = null; var judge = true; window.onload = function(){ //获取按钮 function startTime(){ timer = setInterval(function(){ i++; $("sec").innerHTML = doubleNum(i % 60); $("min").innerHTML = doubleNum(parseInt(i / 60) % 60); $("hour").innerHTML = doubleNum(parseInt(i / 3600)); },1000); } function stopTime(){ clearInterval(timer); } $("start").onclick = function(){ if(judge){ $("start").innerHTML = "继续"; judge = false; startTime(); }else{ $("start").innerHTML = "开始"; judge = true; stopTime(); } } $("reset").onclick = function(){ clearInterval(timer); i = 0; judge = true; $("start").innerHTML = "开始"; $("sec").innerHTML = "00"; $("min").innerHTML = "00"; $("hour").innerHTML = "00"; } } function doubleNum(n){ if(n < 10){ return "0" + n; }else{ return n; } }