需要帮助解决 JavaScript 中的 setInterval 问题

Question

昨天，我被告知 setInterval 在一定的毫秒数后执行任务或功能。我的代码中有时间间隔，但每次它都会创建一个带有日期的新文本行。我希望它在每个间隔结束后替换前一个。我尝试通过将文本和日期定义为要调用的变量来解决此问题，但这也不起作用。另外，对于任何有兴趣的人，

<html>
<head>
<title>Time Stuff Page</title>

</head>
<link href="main.css" rel="stylesheet" type="text/css">
<body>
    <!-- adding color style for demo date buttons via CSS style tag->
<style type="text/css">
    #demo {
        color:red;
         }
    #demo2 {
        color:blue;
        }   
    </style>

<!-- Display date in paragraph -->
<button onclick="getElementById('demo').innerHTML=Date()">The time is? (from innerhtml)</button>
<p id="demo"></p>

<!-- Display date by calling a JS function -->
<button onclick="displayDate()">The time is? (from javascript)</button>
<p id="demo2"></p>

<!-- Display date inside "this" button -->
<button onclick="this.innerHTML=Date()">The time is? (display in button)</button>

<p></p>

<script language="javascript"> 
function displayDate() {
document.getElementById("demo2").innerHTML = Date();
}

var savedate = Date();
document.write("You loaded the page at: "+savedate);

//constantly updated date();
constantDate = function() {
var date = Date();
var timetext = "<br />Updated time is: "+date;
    document.write(timetext);
}

function checkDate() {
setInterval(function(){ constantDate(); }, 10);
}

checkDate();



</script>
</body>
</html>

Answer 1

创建与 displayDate 类似的函数：

function displayDate2() {
   var timetext = "Updated time is: "+Date();
   document.getElementById("demo3").innerHTML =timetext;
}

您还需要在正文中添加另一段：

<p id="demo3"></p>

Answer 2

问题是您的 JavaScript 文件在运行后立即调用 "checkDate()" 函数。这意味着它将运行 "constantDate()" 函数，并且此函数使用 document.write 输出结果。

因此，它将使用该输出向您的文档发送垃圾邮件，而不是将其插入 div。像这样设置它在 "constantDate()" 函数中插入一个 div，然后创建 div，一切都应该没问题：

constantDate = function() {
    var date = Date();
    var timetext = "<br />Updated time is: "+date;
    document.getElementById("demo3").innerHTML = timetext;
}

并创建 div class:

<p id="demo3"></p>

此外，通常，几乎总是这样，最好将 HTML 代码和 JavaScript 代码分开，而不是将 JS 代码或函数添加到 "onclick=" 属性在按钮的 HTML 上，像这样在你的 JS 中添加点击事件：

HTML:
<button id="button2">The time is? (from javascript)</button>

JavaScript:
/* On click event for button 2 */
var button2 = document.getElementById('button2');
button2.onclick = function() {
    displayDate();   
}

检查这个 JS Fiddle 我已经为你做了：http://jsfiddle.net/filipetedim/t0to0hL8/

需要帮助解决 JavaScript 中的 setInterval 问题

Need help fixing setInterval issue in JavaScript

html

javascript

date

function

setinterval