计时器一：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 #div1{ 150px; height: 150px; border: 1px solid black; background-color: orange; margin: 100px auto; text-align: center; padding: 50px} 8 #div1 span{font-size: 30px;} 9 #div1 button{margin-top: 10px; 150px; height: 30px; font-size: 18px; background-color: black; color: white} 10 </style> 11 <script> 12 window.onload = function(){ 13 var oStart = $("start"); 14 var oPause = $("pause"); 15 var oReset = $("reset"); 16 17 var oHour = $("hour"); 18 var oMin = $("min"); 19 var oSec = $("sec"); 20 21 22 var i = 0; //设置总秒数 23 var timer = null; //如果要跨函数使用，该变量作用域必须大 24 //1、给开始按钮添加点击事件 25 oStart.onclick = function(){ 26 timer = setInterval(function(){ 27 i++; 28 oSec.innerHTML = doublueNum(i % 60); 29 oMin.innerHTML = doublueNum(parseInt(i / 60) % 60); 30 oHour.innerHTML = doublueNum(parseInt(i / 3600)); 31 }, 1000); 32 } 33 34 35 //2、暂停 36 oPause.onclick = function(){ 37 clearInterval(timer); 38 } 39 40 //3、复位 41 oReset.onclick = function(){ 42 clearInterval(timer); 43 //<1>总秒数情况 44 i = 0; 45 //<2>页面显示内容情况 46 oSec.innerHTML = "00"; 47 oMin.innerHTML = "00"; 48 oHour.innerHTML = "00"; 49 } 50 51 52 } 53 54 //将单位数变成两位数 55 function doublueNum(num){ 56 if(num < 10){ 57 return "0" + num; 58 }else{ 59 return num; 60 } 61 } 62 63 function $(id){ 64 return document.getElementById(id); 65 } 66 </script> 67 </head> 68 <body> 69 <div id = 'div1'> 70 <span id = 'hour'>00</span> 71 <span>:</span> 72 <span id = 'min'>00</span> 73 <span>:</span> 74 <span id = 'sec'>00</span><br/> 75 <button id = 'start'>开始</button> <br> 76 <button id = 'pause'>暂停</button> <br> 77 <button id = 'reset'>复位</button> 78 </div> 79 </body> 80 </html>
效果：
效果刚开始是正常的，如果一直点开始的话计数就会变快。因为每次点击开始，都会在程序里开一个setInterval计时器。所以会加快计数。
解决上面的bug
1 <script> 2 3 window.onload = function(){ 4 var oStart = $('start'); 5 var oPause = $('pause'); 6 var oReset = $('reset'); 7 8 var oSec = $('sec'); 9 var oMin = $('min'); 10 var oHour = $('hour'); 11 12 var i = 0;//计算总秒数 13 var timer = null; 14 var isRun = false;//用于标识计时器是否在运行 15 //开始 16 oStart.onclick = function(){ 17 if(!isRun){ 18 timer = setInterval(function(){ 19 i++; 20 oSec.innerHTML = doubleNum(i % 60); 21 oMin.innerHTML = doubleNum(parseInt(i / 60) % 60); 22 oHour.innerHTML = doubleNum(parseInt(i / 3600)); 23 isRun = true; //说明计时器在运行，以后在点开始没用了。 24 },1000); 25 } 26 27 } 28 29 //暂停 30 oPause.onclick = function(){ 31 clearInterval(timer); 32 isRun = false;// 标示计时器不在运行了,方便下次点开始时有效计数 33 34 } 35 36 //复位 37 oReset.onclick = function(){ 38 clearInterval(timer); 39 i = 0; 40 oSec.innerHTML = '00'; 41 oMin.innerHTML = '00'; 42 oHour.innerHTML = '00'; 43 isRun = false;// 标示计时器不在运行了,方便下次点开始时有效计数 44 } 45 } 46 47 //一位数转两位数 48 function doubleNum(num){ 49 if(num < 10){ 50 return '0' + num; 51 }else{ 52 return num; 53 } 54 } 55 56 57 //封装获取文档节点的函数,简化代码 58 function $(id){ 59 return document.getElementById(id); 60 } 61 </script>
效果：
可见bug已经解决，在运行过程中点开始，不会对时间产生影响。
计时器二 （一按键双功能）
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>计时器2-多功能开始按钮</title> 6 <style> 7 * { 8 margin: 0; 9 padding: 0; 10 } 11 #timer { 12 margin: 50px auto; 13 200px; 14 height: 180px; 15 padding-top: 20px; 16 font-size: 30px; 17 text-align: center; 18 background: cyan; 19 } 20 21 #timer button { 22 100px; 23 } 24 25 </style> 26 <script> 27 28 window.onload = function(){ 29 var oStart = $('start'); 30 // var oPause = $('pause'); 31 var oReset = $('reset'); 32 33 var oSec = $('sec'); 34 var oMin = $('min'); 35 var oHour = $('hour'); 36 37 var i = 0;//计算总秒数 38 var timer = null; 39 //开始 暂停 一体 40 var isRuning = false; 41 oStart.onclick = function(){ 42 if(!isRuning){ 43 oStart.innerHTML = '暂停'; 44 isRuning = true; 45 46 timer = setInterval(function(){ 47 i++; 48 oSec.innerHTML = doubleNum(i % 60); 49 oMin.innerHTML = doubleNum(parseInt(i / 60) % 60); 50 oHour.innerHTML = doubleNum(parseInt(i / 3600)); 51 },1000); 52 53 54 }else{ 55 oStart.innerHTML = '开始'; 56 isRuning = false; 57 58 clearInterval(timer); 59 } 60 } 61 62 //复位 63 oReset.onclick = function(){ 64 clearInterval(timer); 65 i = 0; 66 oSec.innerHTML = '00'; 67 oMin.innerHTML = '00'; 68 oHour.innerHTML = '00'; 69 oStart.innerHTML = '开始'; 70 isRuning = false; 71 } 72 } 73 74 //一位数转两位数 75 function doubleNum(num){ 76 if(num < 10){ 77 return '0' + num; 78 }else{ 79 return num; 80 } 81 } 82 83 84 //封装获取文档节点的函数,简化代码 85 function $(id){ 86 return document.getElementById(id); 87 } 88 </script> 89 </head> 90 <body> 91 <div id="timer"> 92 <span id="hour">00</span> 93 <span>:</span> 94 <span id="min">00</span> 95 <span>:</span> 96 <span id="sec">00</span> 97 <button id="start">开始</button><br> 98 <button id="reset">复位</button> 99 </div> 100 </body> 101 </html>
效果:
我们再把上面能封装的函数，封装一下。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 #div1{ 150px; height: 150px; border: 1px solid black; background-color: cyan; margin: 100px auto; text-align: center; padding: 50px} 8 #div1 span{font-size: 30px;} 9 #div1 button{margin-top: 10px; 150px; height: 30px; font-size: 18px; } 10 </style> 11 <script> 12 window.onload = function(){ 13 var oBtn = $("btn1"); 14 var oReset = $("reset"); 15 16 var oHour = $("hour"); 17 var oMin = $("min"); 18 var oSec = $("sec"); 19 20 21 var i = 0; //设置总秒数 22 var timer = null; //如果要跨函数使用，该变量作用域必须大 23 //1、开始计时 24 function startFunc(){ 25 timer = setInterval(function(){ 26 i++; 27 oSec.innerHTML = doublueNum(i % 60); 28 oMin.innerHTML = doublueNum(parseInt(i / 60) % 60); 29 oHour.innerHTML = doublueNum(parseInt(i / 3600)); 30 }, 1000); 31 } 32 33 34 //2、暂停计时 35 function pauseFunc(){ 36 clearInterval(timer); 37 } 38 39 40 var isrunning = false; //假设计时器不运行 41 oBtn.onclick = function(){ 42 if(!isrunning){ 43 oBtn.innerHTML = "暂停"; 44 isrunning = true; 45 startFunc(); 46 }else{ 47 oBtn.innerHTML = "开始"; 48 isrunning = false; 49 pauseFunc(); 50 } 51 } 52 53 54 //3、复位 55 oReset.onclick = function(){ 56 clearInterval(timer); 57 //<1>总秒数情况 58 i = 0; 59 //<2>页面显示内容情况 60 oSec.innerHTML = "00"; 61 oMin.innerHTML = "00"; 62 oHour.innerHTML = "00"; 63 64 //<3>将按钮文字改成开始 65 oBtn.innerHTML = '开始'; 66 //<4>将isrunning设置成false 67 isrunning = false; 68 } 69 70 71 } 72 73 //将单位数变成两位数 74 function doublueNum(num){ 75 if(num < 10){ 76 return "0" + num; 77 }else{ 78 return num; 79 } 80 } 81 82 function $(id){ 83 return document.getElementById(id); 84 } 85 </script> 86 </head> 87 <body> 88 <div id = 'div1'> 89 <span id = 'hour'>00</span> 90 <span>:</span> 91 <span id = 'min'>00</span> 92 <span>:</span> 93 <span id = 'sec'>00</span><br/> 94 <button id = 'btn1'>开始</button> <br> 95 <button id = 'reset'>复位</button> 96 </div> 97 </body> 98 </html>
效果和上面的一样。