您的位置：首页 > 编程语言 > Java开发

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

2016-10-26 19:03 274 查看

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

javascript里的代码:

var c=0  
var t  
var hour=0
var min = 0 
var lastsecs = 0
function 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>

效果如下:

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： js javascript 计时器

相关文章推荐

新的分享

章节导航