start按钮中，为什么写onclick="clock()"不起效，而是要重新定义一个函数才起效呢

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

start按钮中，为什么写onclick="clock()"不起效，而是要重新定义一个函数才起效呢

<!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()",1000); //每隔1秒就是执行一次clock()函数，并将返回值赋值给i
</script>
</head>
<body>
<form>
    <input type="text" id="clock" size="50" />
    <input type="button" value="Stop" onclick="clearInterval(i)"/>
    <input type="button" value="Start" onclick="clock()"/>
</form>
</body>
</html>

提问者：阿宅娘 2018-03-20 10:54

个回答

努力让世界更美好

2018-03-20 15:11:27

已采纳

clearInterval(i)已经将定时器清空了
建议修改成如下；另外你的函数名为clock, input的ID号也设置为clock，这样不好，有的浏览器对两个会不能正确识别的……
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>计时器</title>
<script type="text/javascript">
var i;
function Clock(){
var time=new Date();
document.getElementById("clock").value = time;

i=setTimeout("Clock()",1000);
}

//var i = setInterval("Clock()",1000); //每隔1秒就是执行一次clock()函数，并将返回值赋值给i
function StopClock(){
clearTimeout(i);

}

</script>
</head>
<body>
<form>
<input type="text" id="clock" size="50" />
<input type="button" value="Stop" onclick="StopClock()"/>
<input type="button" value="Start" onclick="Clock()"/>
</form>
</body>
</html>

0
corbet

2018-03-20 14:26:36

你的<input type="button" value="Start" onclick="clock()"/>中表示只运行clock()这个function一次，而function中并不包含setInterval方法。
我将<input type="button" value="Start" onclick="clock()"/>改成<input type="button" value="Start" onclick="i"/>就可以运行了，你试试。

0