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 がたくさんあります。次に、時計を停止するボタンと再起動するボタンの 2 つのボタンを作成するように依頼されました。私の 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 の準備が整う前に呼び出されないようにしてください。

また、通常、setTimeoutorsetIntervalを文字列で呼び出すことは悪と見なされます。インラインハンドラーにいない場合は、これの代わりに

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 に答える