<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>timer-计时器</title> <style> div{ width:300px; margin:0 auto; padding-top:60px; } #timer{ font-size:30px; text-align:center; } #start{ font-weight:bold; } </style> <script> var intervalId, //setInterval的id pattern = /^d$/, //正则模式，匹配单个数值 intervalSeconds = 1000, //调用setInterval的间隔时间，设置为 1000 毫秒，即 1 秒 secondIncrement = 0; //设置秒递增器起始值为 0 //注册页面加载事件 window.onload = function () { var start = document.getElementById("start"); var timer = document.getElementById("timer"); function handleTimer() { if (!intervalId) { intervalId = setInterval(function () { secondIncrement++;
//定义一个Date对象实例 var someDate = new Date("1111/1/1,0:0:0");
//设置秒数，当secondIncrement值超过59时，则分钟数会加1 someDate.setSeconds(secondIncrement); var hours = someDate.getHours(); hours = pattern.test(hours) ? "0" + hours + ":" : hours + ":"; var minutes = someDate.getMinutes(); minutes = pattern.test(minutes) ? "0" + minutes + ":" : minutes + ":"; var seconds = someDate.getSeconds(); seconds = pattern.test(seconds) ? "0" + seconds : seconds; timer.value = hours + minutes + seconds; }, intervalSeconds); this.innerHTML = "Pause"; } else { clearInterval(intervalId); intervalId = null; this.innerHTML = "Start"; } } start.addEventListener("click", handleTimer, false); } </script> </head> <body> <div> <p><input type="text" id="timer" value="00:00:00" readonly/></p> <button id="start">Start</button> </div> </body> </html>