增加了一个“start”按钮，如何实现点击“start”按钮后开始计时，而点击“stop”按钮后结束计时呢？下面的代码实现不了，只能实现点击“stop”结束计时，但点击“start”只跳出一次时间，而无法继续计时。。。请高手指点！谢谢！
Amy_9999
2018-04-26 15:47
<!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>
5回答
-
- 有一个昵称
- 2018-05-31 21:36:06
<!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> -
- 安笨
- 2018-05-29 16:30:20
<!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> -
- 安笨
- 2018-05-29 16:26:56
<!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> -
- VictorChan
- 2018-05-03 22:26:50
你这个代码嵌套有问题吧
-
- Amy_9999
- 2018-04-27 09:34:54
貌似要用到下面讲的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>
JavaScript进阶篇
468194 学习 · 21891 问题
相似问题