码迷,mamicode.com
首页 > Web开发 > 详细

js计时器

时间:2015-09-30 12:59:04      阅读:149      评论:0      收藏:0      [点我收藏+]

标签:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>计时器</title>
<script type="text/javascript">
var t=0;
var t1;
//定义$函数获取id
function $(id){
  return document.getElementById(id);
}
//开始计时
function timeStart(){
  hour = parseInt(t / 3600);// 时
  min = parseInt(t / 60);// 分
  if(min>=60){
    min = min % 60;
  }
  lastsecs = t % 60; //秒
  if(lastsecs<10){lastsecs = ‘0‘ + lastsecs;}
  if(min<10){min = ‘0‘ + min;}
  if(hour<10){hour = ‘0‘ + hour;}
  //在输入框显示计时
  $(‘txt‘).value = hour + ":" + min + ":" + lastsecs;
  t = t + 1;
  t1 = setTimeout(‘timeStart()‘,1000)
  $(‘start‘).style.display = "none";
  $(‘stop‘).style.display = "";
}
//停止计时
function timeStop(){
  clearTimeout(t1)
  $(‘start‘).style.display = "";
  $(‘stop‘).style.display = "none";
}
//清除
function clearAll(){
  t=0;
  $(‘txt‘).value= "00:" + "00:" + "00";
  clearTimeout(t1);
  $(‘start‘).style.display ="";
  $(‘stop‘).style.display = "none";
}
</script>
</head>
<body>
<p>点击“开始计时”按钮启动计时器开始进行计时,从 0 开始,点击“停止计时”按钮停止计时。</p>
<form>
<input type="text" id="txt" value="00:00:00" />
<input type="button" value="开始计时" id="start" onClick="timeStart()" />
<input type="button" value="停止计时" style="display:none" id="stop" onClick="timeStop()" />
<input type="button" value="清除" onClick="clearAll()" />
</form>
</body>
</html>

js计时器

标签:

原文地址:http://www.cnblogs.com/Sillynoob/p/4848642.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!