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

增加了一个“start”按钮，如何实现点击“start”按钮后开始计时，而点击“stop”按钮后结束计时呢？下面的代码实现不了，只能实现点击“stop”结束计时，但点击“start”只跳出一次时间，而无法继续计时。。。请高手指点！谢谢！

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>计时器</title>

<script type="text/javascript">

var i;

function start(){

var time=new Date();

document.getElementById("myclock").value = time;

// i=setInterval("start()",1000);

}

i=setInterval("start()",1000);

function stop(){

// i=setInterval("start()",1000);

clearInterval(i);

}

</script>

</head>

<body>

<form>

<input type="text" id="myclock" size="50" />

<input type="button" value="Start" onclick="start()" />

<input type="button" value="Stop" onclick="stop()" />

</form>

</body>

</html>

Amy_9999

2018-04-26

源自：JavaScript进阶篇 8-4

关注问题我要回答

2293

操作

收起

6 回答

有一个昵称
2018-05-31

<!DOCTYPE html><html>	<head>		<meta charset="UTF-8">		<title></title>		<style>			html{				font-size: 100px;				text-align: center;			}			#clock,#stop,#start{				font-size: 1rem;				height: 1rem;				width: 90%;			}		</style>	</head>	<body>		<input id="clock" size="50" type="text"/>		<button type="button" onclick="start();" id="start" style="font-size: 0.6rem;">开始</button>		<button type="button" onclick="stop();" id="stop" style="font-size: 0.6rem;">暂停</button>		<script type="text/javascript">		var mystr="Hello World!";		document.write(mystr.substr(-1,6)  + "<br />");		document.write(mystr.substr(0,5)   + "<br />");//		var int=setInterval(clock, 100)//		function clock(){//		    var time=new Date();//		    document.getElementById("clock").value = time;//		}				  var attime;		  var timer;		  function clock(){		    var time=new Date();          		    attime=time.getHours()+":"+time.getMinutes()+":"+time.getSeconds();		    document.getElementById("clock").value = attime;		  }		  timer = setInterval(clock,1000); //注意这里函数clock 为参数，只写函数名		  function stop(){		  	clearInterval(timer);		  }		  function  start(){		  	timer = setInterval(clock,1000);		  }		 		</script>	</body></html>

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

安笨
2018-05-29

<!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;
           function start() {
           	i = setInterval("clock()",100);
           }
        </script>
    </head>
    <body>
      <form>
          <input type="text" id="clock" size="50"  />
          <input type="button" value="Start" onclick="start()" />
          <input type="button" value="Stop" onclick="clearInterval(i)" />
      </form>
    </body>
</html>

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

安笨
2018-05-29

<!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;   function start() {	i = setInterval("clock()",100);   }    </script></head><body>  <form>    <input type="text" id="clock" size="50"  />    <input type="button" value="Start" onclick="start()" />    <input type="button" value="Stop" onclick="clearInterval(i)" />  </form></body></html>

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

VictorChan
2018-05-03

你这个代码嵌套有问题吧

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

Amy_9999 提问者
2018-04-27

貌似要用到下面讲的setTimeout和clearTimeout才可以。

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>计时器</title>

<script type="text/javascript">

var i;

function start(){

var time=new Date();

document.getElementById("myclock").value = time;

i=setTimeout("start()",1000);

}

// i=setTimeout("start()",1000);

function stop(){

clearTimeout(i);

}

</script>

</head>

<body>

<form>

<input type="text" id="myclock" size="50" />

<input type="button" value="Start" onclick="start()" />

<input type="button" value="Stop" onclick="stop()" />

</form>

</body>

</html>

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

举报

0/150

提交

取消

JavaScript进阶篇

参与学习 468044 人
解答问题 21891 个

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

本课相似问答

4 回答再加一个按钮star，点击按钮计时器继续运行怎么实现呢

2 回答怎么点击stop按钮计时器不停止？

4 回答为啥出来的结果，再点击stop按钮后，时间为啥没有停止计时呢？

2 回答如何实现点击start后，重新从0开始计数

1 回答点击两次start，stop也需要按两次才结束

搜索更多本课相关问答

增加了一个“start”按钮，如何实现点击“start”按钮后开始计时，而点击“stop”按钮后结束计时呢？下面的代码实现不了，只能实现点击“stop”结束计时，但点击“start”只跳出一次时间，而无法继续计时。。。请高手指点！谢谢！

我要回答关注问题

意见反馈帮助中心 APP下载