-1

我有一个任务要求我创建一个页面，之后可以显示一个时钟

用户单击开始按钮并在单击停止按钮时停止

时钟需要显示在“span”标签内，因为我需要 DOM1 方法。

所以我的代码目前看起来像这样

*我已经解决了这个问题。

function clock()
{


var obj = document.getElementById('clock');
if (obj)
{
var now = new Date();
var mytime = now.getHours()+":"+now.getMinutes()+"."+now.getSeconds();
obj.innerHTML = mytime;

}
}




</script>

</head>

<body onload="clock()">
<table>
<h1>A live clock in JavaScript</h1>

<p>The time according to your PC is :<span id="clock"></span></p>




<input type="button" name="clickMe" value="Start the clock"
onclick="timer = setInterval(clock, 1000)"/>


<button onclick="window.clearInterval(timer)">Stop</button>
</table>
</body>
</html>
4

1 回答 1

0 
obj.document.getElementById('clock');

由于obj此时未定义，它将抛出一个referenceError. 也许你的意思是：

var obj = document.getElementById('clock');

if (obj != "false")

这很可能不起作用，因为您正在与字符串进行比较。如果你想检查是否obj是一个对象或null，你可以使用

if (obj)

obj = mytime;

这不会修改原来的obj，而是覆盖持有对它的引用的变量。也许你想要

obj.innerHtml = mytime;

还从

<p id="clock">The time according to your PC is :</p>

至

<p>The time according to your PC is :<span id="clock"></span></p>

这样您就不会覆盖文本但会覆盖时钟。

onclick="setTimeout('"
...
onclick="int=window.clearInterval(int)"

缺少一个部分：

onclick="timer = setInterval(clock, 1000)"
...
onclick="window.clearInterval(timer)"

其中第一个参数是被重复调用的函数，第二个参数是调用的频率，以毫秒为单位。另请注意， 的返回值clearInterval并不是特别有用，因为它的参数应该是 的返回值setInterval。

setTimeout还要注意（将调用一个函数一次）和setInterval（将重复调用它）之间的区别。

另请注意，该timer变量现在驻留在全局范围内。这在大型项目中可能是一个问题。如果您多次启动计时器，您也会遇到问题，因为您现在无法停止它。考虑一下这个（在末尾body）（并为两个输入分配正确的 ID）：

(function(){ //create a scope
  var timer; //create a local variable

  document.getElementById("clock-start")
  .addEventListener("click", function(){
    if(!timer) timer = setInterval(clock, 1000);
  })

  document.getElementById("clock-stop")
  .addEventListener("click", function(){
    clearInterval(clock);
  })
})() // remember to call our anonymous function

或jQuery版本（文档中的任何位置）：

$(document).ready(function(){ //execute on DOM ready
  var timer;

  $("#clock-start").on("click", function(){
    if(!timer) timer = setInterval(clock, 1000);
  })

  $("#clock-stop").on("click", function(){
    clearInterval(clock);
  })
});
于 2012-12-17T05:07:49.137 回答