jQuery计时器

jQuery计时器

代码:(编辑可实时显示)

  • HTML
  • CSS
  • JS
  • 切换主题

效果:

解释:

parseInt() 函数可解析一个字符串,并返回一个整数。

setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。

由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

完整代码:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script type="text/javascript" src="//libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style>
.btnl,btnr{ width:60px;height:25px;}
</style>
</head>
  
<body>
  
<input type="text" class="showTime">
<button class="btnl">开始</button>
<button class="btnr">结束</button>
<script type="text/javascript">
 var timeIndex = 0;
 $(".btnl").click(function(){    //点击btnl触发setTime()函数
 setTime();
 times = setInterval(setTime, 1000);    //每隔1秒执行函数
 });
 $(".btnr").click(function(){
 clearInterval(times);    //清除对函数的调用
 });
 function setTime(){
 var hour = parseInt(timeIndex / 3600);    // 计算时 
 var minutes = parseInt((timeIndex % 3600) / 60);    // 计算分 
 var seconds = parseInt(timeIndex % 60);    // 计算秒  
 hour = hour < 10 ? "0" + hour : hour;
 minutes = minutes < 10 ? "0" + minutes : minutes;
 seconds = seconds < 10 ? "0" + seconds : seconds;
 $(".showTime").val(hour + ":" + minutes + ":" + seconds);
 timeIndex++;
 }
</script>
</body>
</html>

 

支付宝打赏 微信打赏
分享到 :