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

怎么让一个计时器可以不停地暂停和开始呢

<!DOCTYPE HTML>

<html>

<head>

function clock(){

var time=new Date();

var atime=time.getHours()+":"+time.getMinutes()+":"+time.getSeconds();

document.getElementById("cloc").value = atime;

}

var aa=setInterval("clock()",2000);

</script>

</head>

<body>

<form>

</form>

</body>

</html>

这个计时器只能暂停一次，再点开始就没有了计时器的功能了

隔壁诸葛村夫

2016-09-18

源自：JavaScript进阶篇 8-4

关注问题我要回答

8425

操作

收起

8 回答

向死而生3491500 回答被采纳 +3 积分
2016-09-18

看了一下各位的代码，把我刚做的倒计时加了个开始和停止。。。

分析原理：

定义一个变量装时间函数“sh = setTimeout(setTime,500) ‘’;
网页开始时是开始及时的，开始（setTimeout）和停止（ clearInterval）应在设置时间函数的外面去控制

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

收起回答

隔壁诸葛村夫提问者

看起来很炫酷，但是你这停止了之后就没法再次开始了，

2016-09-18 回复有任何疑惑可以回复我~

向死而生3491500 回复隔壁诸葛村夫提问者

有开始和停止两个单击事件按钮，可以重新开始。。。

2016-09-18 回复有任何疑惑可以回复我~

隔壁诸葛村夫提问者回复向死而生3491500

但是，我在运行你的程序时，我先按停止，确实生效了，但我再按开始没有任何反应啊，时间并没有继续走动

2016-09-18 回复有任何疑惑可以回复我~

查看2条回复

深渊大魔王4100108
2016-10-12

<!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 myvalue=setInterval(clock,1000); 
    function cclock()
    {
        myvalue=setInterval(clock,1000); 
    }
</script>
</head>
<body>
  <form>
    <input type="text" id="clock" size="50"  />
    <input type="button" id="stop" value="Stop" onClick="clearInterval(myvalue)" />
    <input type="button" id="continun" value="continun" onClick="cclock()"/>
  </form>
</body>
</html>

我做这题的时候也想设置一个开始按钮我这么写自己测试是可以实现开始跟暂停但不知道有没有什么其他问题

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

收起回答

深渊大魔王4100108

额，倒是是计时器还是倒计时器啊。。。

2016-10-12 回复有任何疑惑可以回复我~

隔壁诸葛村夫提问者
2016-09-18

<!DOCTYPE HTML>

<html>

<head>

var a;

function clock(){

var time=new Date();

var atime=time.getHours()+":"+time.getMinutes()+":"+time.getSeconds();//获取具体时间

document.getElementById("cloc").value = atime;//将获取的时间在文本框内显示出来

}

function p(){

a=setInterval("clock()",2000);//计时器

}

function q(){

clearInterval(a);//清除计时器

}

</script>

</head>

<body>

<form>

</form>

</body>

</html>

我把这个计时器重新写了下，点开始时才开始计时。

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

收起回答

向死而生3491500

一般情况下，获取动态时间都应设置500毫秒，开始运行你的代码时，我还以为你开了2个计时器，你写的这个和我上面的一样。。。

2016-09-18 回复有任何疑惑可以回复我~

隔壁诸葛村夫提问者回复向死而生3491500

是一样的，只是你用到知识更多，

2016-09-18 回复有任何疑惑可以回复我~

向死而生3491500
2016-09-18

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <script type="text/javascript" language="JavaScript">
           var sh;
           window.onload = function(){
               setTime();
           }
           function checkTime(t){
               if(t<10){
                   t="0"+t;
               }
               return t;
           }
           function setTime(){
               var nowTime = new Date();                //当前系统时间
               var endTime = new Date("2016/10/01,00:00:00"); // 结束时间
               var chaTime = parseInt((endTime.getTime() - nowTime.getTime())/1000);//获取时间戳   getTime()将时间戳处理成毫秒数

               var d = Math.floor(chaTime/(24*60*60)); //天
               var h =   Math.floor((chaTime/(60*60))%24);//时
               var m = Math.floor((chaTime/(60))%60);   //分
               var s = Math.floor(chaTime%60);           //秒
                   m = checkTime(m);
                   s = checkTime(s);

               if(chaTime<=0){
                   document.getElementById("showTime").innerHTML="团购结束";
               }else{
                   document.getElementById("showTime").innerHTML=
               "距离10月1号还剩"+d+"天"+h+"时"+m+"分"+s+"秒";
               clearInterval(sh);//清除计时器
               }
               sh=setTimeout(setTime,500);
           }
               var start = function(){
               sh=setTimeout(setTime,500);
               }
               var stop = function(){
                   clearInterval(sh);
               }
       </script>
   </head>
   <body>
       <span id="showTime" style="color: red;"></span>
       <input type="button" value="停止倒计时" onclick="stop()"/>
       <input type="button" value="开始倒计时" onclick="start()"/>
   </body>
</html>