Javascript 如何在dom中正确插入元素以及有关setInterval的内容_Javascript_Date_Setinterval_Clock_Clearinterval

Javascript 如何在dom中正确插入元素以及有关setInterval的内容

javascript date

Javascript 如何在dom中正确插入元素以及有关setInterval的内容,javascript,date,setinterval,clock,clearinterval,Javascript,Date,Setinterval,Clock,Clearinterval,我得到一个任务，要求我创建一个页面，可以显示一个时钟后用户单击开始按钮，并在单击停止按钮时停止时钟需要显示在“span”标记中，因为我需要DOM1方法所以我的代码现在看起来是这样的 *我已经修好了 function clock() { var obj = document.getElementById('clock'); if (obj) { var now = new Date(); var mytime = now.getHours()+":"+now.getMinutes()+"

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

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

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

功能时钟（）
{
var obj=document.getElementById（'clock'）；
如果（obj）
{
var now=新日期（）；
var mytime=now.getHours（）+“：“+now.getMinutes（）+”+now.getSeconds（）；
obj.innerHTML=mytime；
}
}
JavaScript中的实时时钟
根据您的电脑，时间为：
停止

由于此时未定义

obj

，因此它将抛出

referenceError

。也许你的意思是：

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

这很可能不起作用，因为您正在与字符串进行比较。如果要检查

obj

是对象还是

null

，可以使用

if (obj)

这不会修改原始的

obj

，而是覆盖包含对其引用的变量。也许你想要

obj.innerHtml = mytime;

还可以将HTML从

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

缺少一个部件：

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

其中第一个参数是重复调用的函数，第二个参数是以毫秒为单位的调用频率。还要注意，

clearInterval

的返回值不是特别有用，因为它的参数应该是

setInterval

返回的值

还要注意

setTimeout

（将调用函数一次）和

setInterval

（将重复调用）之间的区别

还要注意的是，

timer

变量现在位于全局范围内。在大型项目中，这可能是一个问题。如果您多次启动计时器，您也会遇到问题，因为您现在无法停止计时器。考虑这个问题（在<代码>正文< /COD>结束时）（并将正确的ID分配给两个输入）：

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

谢谢你回答我的问题，但我仍然有一些问题。首先，我的时钟从来没有出现在我的页面上，其次，我真的不明白你让我在页面中插入的功能是什么，这是不是让我来控制这些按钮？“我的老师还没有提到如何调用匿名函数，那么我该怎么做呢？”AnsonAştepta告诉我。我想我已经抓住了一切。

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)"

(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

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