分享一个简单实用的前台计时器

来源：互联网发布：网络语rbq是什么意思编辑：程序博客网时间：2024/05/07 10:35

<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">     最近做了一个前端的计时器，JS实现的，感觉还不错，和大家分享一下:</span>

javascript里的代码:

var c=0  var t  var hour=0var min = 0 var lastsecs = 0function timedCount()  {  <span style="white-space:pre"></span>var temptextmin=document.getElementById('txt');  <span style="white-space:pre"></span>hour = parseInt(c / 3600);// 小时数  <span style="white-space:pre"></span>min = parseInt(c / 60);// 分钟数  <span style="white-space:pre"></span>if(min>=60){ <span style="white-space:pre"></span>    <span style="white-space:pre"></span>min=min%60    <span style="white-space:pre"></span><span style="white-space:pre"></span>}  <span style="white-space:pre"></span>lastsecs = c % 60;  <span style="white-space:pre"></span><span style="white-space:pre"></span>temptextmin.value = hour + "时" + min + "分" + lastsecs + "秒"  <span style="white-space:pre"></span><span style="white-space:pre"></span>c=c+1  <span style="white-space:pre"></span>t=setTimeout("timedCount()",1000)  <span style="white-space:pre"></span>document.getElementById('start').style.display = "none";     <span style="white-space:pre"></span>document.getElementById('end').style.display = "";   }

//停止计时

function stopCount()  {  <span style="white-space:pre"></span>clearTimeout(t)  <span style="white-space:pre"></span><span style="white-space:pre"></span>document.getElementById('start').style.display = "";     <span style="white-space:pre"></span>document.getElementById('end').style.display = "none";   <span style="white-space:pre"></span>c=0  <span style="white-space:pre"></span>document.getElementById('txt').value=  "0时" +  "0分" + "0秒"  <span style="white-space:pre"></span>clearTimeout(t)  <span style="white-space:pre"></span>document.getElementById('start').style.display ="";     <span style="white-space:pre"></span>document.getElementById('end').style.display = "none";   }

body中的代码:

<body>       <input type="text" id="txt" value="0时0分0秒" style="text-align: center;width: 200px;height: 60px; background: black; font-size: 220%;color: white;">  <input  type="button" value="开始计时" id="start" onClick="timedCount()" class="button pink" style="height: 40px;width: 130px;font-size:150%" >  <input  type="button" value="停止计时" class="button pink" style="font-size:150%;height: 40px;width: 130px;display: none" id="end" onClick="stopCount()">  </body>

效果如下:

2 0