JavaScript实现美观秒表计时器：功能分析与完整代码

<div id="miaoBiao">
 <div id="dingShi">
 <p>
 <!-- <span id="houer">00</span> : -->
 <span id="minute">00</span> : 
 <span id="second">00</span>&ensp;
 <span id="msecond">00</span>
 </p>
 <!-- 显示：时：分：秒 跑秒 ，“时”解除注释可使用 -->
 <button id="btn1">开始</button>
 <button id="reset">复位</button>
 </div>
</div>

function jieDian(id){
   return document.getElementById(id);
  }

function startBtn(){
 timer1=setInterval(function(){
 i++
 jieDian("msecond").innerHTML =doubleLing(i%100);
 jieDian("second").innerHTML =doubleLing(parseInt(i/100)%60) ;
 jieDian("minute").innerHTML =doubleLing(parseInt(i/6000)%60) ;
 jieDian("houer").innerHTML =doubleLing(parseInt(i/360000)) ;
 },10)
 }
 //开始运行函数

function pasueBtn(){
 clearInterval(timer1)
 }

function doubleLing(i){
 if(i<10){
 return "0"+i
 }else{
 return i
 }
 }
//赋0函数，当时分秒显示为个位数时，在前面加上“0”

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
 #miaoBiao{
 width: 550px;height: 450px;background-color: #1d262d;overflow: hidden;
 margin: 50px auto;border-radius: 150px;
 }
 #dingShi{
 width: 400px;height: 230px;background-color:#d0eaeb;text-align: center;
 padding-top: 0px;margin: 110px auto;border-radius: 40px;
 }
 #dingShi p{
 font-size: 40px;padding-top: 40px;
 }
 #minute,#second,#houer{
 font-size: 56px;
 }
 #dingShi button{
 width: 80px;height: 35px;background-color: orange;margin: 10px auto;
 line-height: 35px;font-weight: bold;margin: 0px 20px;
 }
 </style>
</head>
<body>
 <div id="miaoBiao">
 <div id="dingShi">
 <p>
 <span id="houer">00</span> : 
 <span id="minute">00</span> : 
 <span id="second">00</span>&ensp;
 <span id="msecond">00</span>
 </p>
 <!-- 显示：时：分：秒 跑秒 ，“时”解除注释可使用 -->
 <button id="btn1">开始</button>
 <button id="reset">复位</button>
 </div>
 </div>
 
 <script>
 var i = 0;
 var timer1=null;
 var isRunning =false;
 //isRunning用于判断当前是否正在运行
 function jieDian(id){
 return document.getElementById(id);
 }
 //id节点调用函数

 function startBtn(){
 timer1=setInterval(function(){
 i++
 jieDian("msecond").innerHTML =doubleLing(i%100);
 jieDian("second").innerHTML =doubleLing(parseInt(i/100)%60) ;
 jieDian("minute").innerHTML =doubleLing(parseInt(i/6000)%60) ;
 jieDian("houer").innerHTML =doubleLing(parseInt(i/360000)) ;
 },10)
 }
 //开始运行函数

 function pasueBtn(){
 clearInterval(timer1)
 }
 //暂停函数

 jieDian("btn1").onclick = function(){
 if(!isRunning){
 jieDian("btn1").innerHTML = "暂停";
 isRunning = true;
 startBtn();
 }else{
 jieDian("btn1").innerHTML="开始";
 isRunning = false;
 pasueBtn();
 }
 }
 //“开始”与“暂停”点击按钮：
 //当按钮显示为“开始”，点击之后，将按钮转为“暂停”按钮，并触发相应条件；
 //当按钮显示为“暂停”，点击之后，将按钮转为“开始”按钮，并触发相应条件。

 jieDian("reset").onclick =function(){
 clearInterval(timer1)
 i = 0;
 isRunning = false;
 jieDian("btn1").innerHTML="开始";
 jieDian("msecond").innerHTML ="00";
 jieDian("second").innerHTML ="00";
 jieDian("minute").innerHTML ="00";
 jieDian("houer").innerHTML ="00";
 }
 //复位按钮，点击之后将秒表各值复位，并“暂停”秒表

 function doubleLing(i){
 if(i<10){
 return "0"+i
 }else{
 return i
 }
 }
 //赋0函数，当时分秒显示为个位数时，在前面加上“0”
 </script>
</body>
</html>