Question

我有一个任务要求我创建一个页面，可以在

之后显示一个时钟

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

时钟需要在“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>

Answer 1

obj.document.getElementById('clock');

由于obj此时未定义，因此会抛出referenceError。也许你的意思是：

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

if (obj != "false")

这很可能不起作用，因为你要比较一个字符串。如果您想检查obj是对象还是null，可以使用

if (obj)

obj = mytime;

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

obj.innerHtml = mytime;

也可以从

更改HTML

<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);
  })
});

我怎样才能正确地在dom中插入元素和setInterval

1 个答案: