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

首页课程实战体系课手记专栏慕课教程

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

来源：8-4 取消计时器clearInterval()

隔壁诸葛村夫

2016-09-18 16:03

<!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>

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

写回答关注

7回答

向死而生3491500

2016-09-18 17:56:56

已采纳
看了一下各位的代码，把我刚做的倒计时加了个开始和停止。。。
分析原理：
1. 定义一个变量装时间函数“sh = setTimeout(setTime,500) ‘’;
2. 网页开始时是开始及时的，开始（setTimeout）和停止（ clearInterval）应在设置时间函数的外面去控制
5 0

隔壁诸葛村夫

非常感谢！

2016-09-18 21:05:04

共 5 条回复 >

深渊大魔王4100108: 2016-10-12 10:47:33

<!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>

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

1 0

深渊大魔王4...

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

2016-10-12 10:50:01

共 1 条回复 >

隔壁诸葛村夫

2016-09-18 20:52:34

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>计时器</title>
<script type="text/javascript">
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>
<input type="text" id="cloc" size="50" />
<input type="button" value="Stop" onclick="q()" />
<input type="button" value="Start" onclick="p()" />
</form>
</body>
</html>
我把这个计时器重新写了下，点开始时才开始计时。

2 0

隔壁诸葛村夫回复向死而生34...

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

2016-09-18 21:12:19

共 2 条回复 >
向死而生3491500

2016-09-18 17:51:01

<!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>

0 0
隔壁诸葛村夫

2016-09-18 17:10:47

<!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.write(time+"<br />");//获取时间
var atime=time.getHours()+":"+time.getMinutes()+":"+time.getSeconds();//获取具体时间
document.getElementById("cloc").value = time;//将获取的时间在文本框内显示出来
}
var aa=setInterval("clock()",2000);//计时器
function s(){
aa=setInterval("clock()",2000);//计时器
}
</script>
</head>
<body>
<form>
<input type="text" id="cloc" size="50" />
<input type="button" value="Stop" onclick="clearInterval(aa)" />
<input type="button" value="Start" onclick="s()" />
</form>
</body>
</html>
貌似我把第九行注释掉就没问题了，可以开始和停止了

0 0
别着急

2016-09-18 17:04:48

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>计时器</title>
<script type="text/javascript">
var panduan;
function clock(){
var time=new Date();
var atime=time.getHours()+":"+time.getMinutes()+":"+time.getSeconds();
document.getElementById("cloc").value = atime;
}
panduan=setInterval("clock()",1000);
function start(){
panduan=setInterval("clock()",1000);
}
function delet(){
clearInterval(panduan);
}

</script>
</head>
<body>
<form>
<input type="text" id="cloc" size="50" />
<input type="button" value="Stop" onclick="delet()" />
<input type="button" value="start" onclick="start()" />
</form>
</body>
</html>

1 0

隔壁诸葛村夫

貌似这个开始按钮没有生效啊

2016-09-18 17:08:20

共 1 条回复 >
别着急

2016-09-18 16:55:37

额，我这边连暂停都不行0.0

0 0

JavaScript进阶篇

本课程从如何插入JS代码开始，带您进入网页动态交互世界

467404 学习 · 21877 问题

查看课程

相似问题

计时器代码暂停/开始只有第一次有用，如暂停——开始——暂停（这一次没有效果了），应该如何改进？

回答 2

停止和计时开始该怎么相互转换呢？

回答 3

为什么计时器停不了？

回答 4

怎么多点击几次开始按钮，数字加的越来越来。点暂停的时候，开始点了几次，暂停就要点几次才停的下。

回答 2

鄙人不才，继续暂停，继续暂停

回答 3

打开慕课网App查看更多内容