                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /JavaScript进阶篇

计时器问题，各位帮忙解决一下。。

我想设定一个计时器，可以让它按第一个键开始计时，按下第二个键结束，怎么实现呐？

我是着做了一下，但是只可以暂停一次，再按就不管用了。

<input type="button" value="Stop" onclick="clearInterval(i)" />
<input type="button" value="start" onclick="setInterval(clock,100)"

渊渊

2015-05-09

源自：JavaScript进阶篇 8-4

关注问题我要回答

1136

操作

收起

3 回答

牙尖十怪
2015-05-09

页面中添加一个<input type="hidden" class="J-hidval" value=" 0 ">

$(".J-btn").bind("click", function () {
if ($(".hidval").val() == 0) {

                        $(".hidval").val(1);
                } else {

                        $(this).siblings(".hidval").val(0);
                }
            })

把你开始和暂停的方法放到空白处就可以了。

1 回复有任何疑惑可以回复我~

收起回答

渊渊提问者

非常感谢！

2015-05-10 回复有任何疑惑可以回复我~

常过无痕
2015-07-14

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>计时器</title>
<script type="text/javascript">
   function clock(){
      var time=new Date();
      document.getElementById("clock").value = time;
   }
   var i=setInterval(clock,100);
   function timeClock(x){
	   if(x==0){
		   i=setInterval(clock,100);
	   }else{
		   clearInterval(i);
	   }
   }
   
</script>
</head>
<body>
  <form>
    <input type="text" id="clock" size="50"  />
    <input type="button" value="Stop"  onclick="timeClock(1)"/>
    <input type="button" value="Start"  onclick="timeClock(0)"/>
  </form>
</body>
</html>

这样写也能实现，你可以参考下

0 回复有任何疑惑可以回复我~

收起回答

牙尖十怪
2015-05-09

不好意思没仔细看题，上面的代码是针对只有一个按钮的，第一次按下开始方法，第二次按下停止，再次按下又会开始，实现的原理是通过获取设定的<input type="hidden" class="J-hidval" value=" 0 ">的value值来判定执行什么程序。绑定点击事件后，当val=0时，便执行计时，同时改变val的值为1，当val=1时，便执行停止，同时把val还原为0,。

有两个btn分别控制的时候，原理同上面一样。

0 回复有任何疑惑可以回复我~

收起回答