Question

<!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函数不起作用。有什么想法吗？

干杯

Answer 1

您需要保存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);
};

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

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

setInterval('updateClock()', 1000);

您想要传递功能

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

但是当然updateClock也是一个函数，所以上面的内容比

更嘈杂

setInterval(updateClock, 1000);

Answer 2

clearInterval函数应该会收到setInterval生成的ID。类似的东西：

var theid = setInterval('updateClock()', 1000);
clearInterval(theid);

Answer 3

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

我的clearInterval函数问题

3 个答案: