Question

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

<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创建类似的功能：

>> like "abcde" "b*d"
== "bcde"

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

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

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类：

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

此外，通常，像往常一样，更好地分离HTML代码和JavaScript代码，因此不要在按钮的HTML上的“onclick =”属性中添加JS代码或函数，而是在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小提琴：http://jsfiddle.net/filipetedim/t0to0hL8/

需要帮助修复JavaScript中的setInterval问题

2 个答案: