0 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
<!--

function init()
{
  timeDisplay = document.createTextNode ( "" );
  document.getElementById("clock").appendChild ( timeDisplay );
}

function updateClock()
{
  var currentTime = new Date ();

  var currentHours = currentTime.getHours();
  var currentMinutes = currentTime.getMinutes();
  var currentSeconds = currentTime.getSeconds();

  // Adds zeros if required
  currentMinutes = ( currentMinutes < 10 ? "0" : "" ) + currentMinutes;
  currentSeconds = ( currentSeconds < 10 ? "0" : "" ) + currentSeconds;

  // Decides whether AM or PM
  var timeOfDay = ( currentHours < 12 ) ? "AM" : "PM";

  // Convert the hours component to 12-hour format if needed
  currentHours = ( currentHours > 12 ) ? currentHours - 12 : currentHours;

  // Convert an hours component of "0" to "12"
  currentHours = ( currentHours == 0 ) ? 12 : currentHours;

  // Creates the display string
  var currentTimeString = currentHours + ":" + currentMinutes + ":" + currentSeconds + " " + timeOfDay;

  // Updates the time display
  document.getElementById("clock").firstChild.nodeValue = currentTimeString;
}

// -->
</script>
<link rel="stylesheet" type="text/css" href="week9live.css" />
</head>

<body onload="updateClock(); setInterval('updateClock()', 1000 )">
<h1>A live clock in Javascript</h1>
<div>
  <p>The time according to your pc is </p> <span id="clock">&nbsp;</span>
</div>
</br>
<button type ="button" onclick = "clearInterval('updateClock()')">Stop Clock</button>
<button type="button" onclick="setInterval('updateClock()', 1000)">Start Clock</button>
</body>
</html>

我有很多用来生成实时时钟的 HTML。然后，我的任务是创建两个按钮，一个用于停止时钟，另一个用于重新启动它。我的 setInterval 函数工作正常，但我终生无法弄清楚为什么 clearInterval 函数不起作用。有任何想法吗？

干杯

4

3 回答 3

3

您需要保存从返回的值，并将setInterval其传递给您的调用clearInterval。

var idForClear = setInterval(updateClock, 1000);

接着

clearInterval(idForClear);

如果您放弃内联 dom 级别 0 处理程序并执行类似的操作，这将容易得多

<button id="stopBtn" type ="button">Stop Clock</button>
<button id="startBtn" type="button">Start Clock</button>

var idForClear;
document.getElementById("startBtn").onclick = function() {
    idForClear = setInterval(updateClock, 1000);
};
document.getElementById("stopBtn").onclick = function() {
    clearInterval(idForClear);
};

只需确保将此脚本放在页面正文的底部，以确保document.getElementById在 dom 准备好之前不会被调用。

setTimeout此外，调用或setInterval使用字符串通常被认为是邪恶的。当您不在内联处理程序中时，而不是这个

setInterval('updateClock()', 1000);

你想传入一个函数

setInterval(function() { updateClock(); }, 1000);

但是当然 updateClock 也是一个函数，所以上面是一个更嘈杂的等价于

setInterval(updateClock, 1000);
于 2011-12-29T15:51:08.933 回答
0

该clearInterval函数应接收由 生成的 id setInterval。就像是：

var theid = setInterval('updateClock()', 1000);
clearInterval(theid);
于 2011-12-29T15:51:37.213 回答
0

在 clearInterval 中传递 setInterval 的 id 请参阅：ClearInterval

于 2011-12-29T15:51:57.843 回答