如何在自行携带的html网页上设置时间函数

How to set time function on html web page which carry on itself?

本文关键字：网页 html 设置 函数 时间      更新时间：2023-09-26

我想在自动运行的网页上设置时间，所以我有带有 id 属性的 html 代码：

function tellTime() {
  var now = new Date();
  var theHr = now.getHours();
  var theMin = now.getMinutes();
  document.write("time: " + theHr + ":" + theMin);
}
document.getElementById("demo").innerHTML = tellTime();
<div id="demo"></div>

因此，当页面重新加载

时，似乎是时间，但用户重新加载页面以查看当前时间。

我们如何设置不需要重新加载即可查看当前时间的函数？

使用 setInterval() ：

function tellTime() 
{
    var now = new Date(),
        hrs = now.getHours(),
        min = now.getMinutes(),
        sec = now.getSeconds();
    document.getElementById("demo").innerHTML = ("time: " + hrs + ":" + min + ':' + sec);
}
window.setInterval(tellTime, 1000);

jsFiddle 演示

您可以使用 setTimeout 自动刷新它，也可以创建一个事件（例如单击事件）来重新加载时间，使用 setTimeout，您可以像这样使时间每秒刷新一次：

function tellTime() {
    var now = new Date();
    var theHr = now.getHours();
    var theMin = now.getMinutes();
    return "time: " + theHr + ":" + theMin;
}
function printTime() {
    document.getElementById("demo").innerHTML = tellTime();
    setTimeout(printTime, 1000); // Run this function again after a second
}

你需要使用setInterval。 

function tellTime() {
   var now = new Date();
   var theHr = now.getHours();
   var theMin = now.getMinutes();
   var theSec = now.getSeconds();
   return "time: " + theHr + ":" + theMin + ":" + theSec;
}
setInterval(function() {
   document.getElementById("demo").innerHTML = tellTime();
}, 1000);
<div id="demo">
</div>

var myVar = setInterval(myTimer, 1000);
function myTimer() {
  var d = new Date();
  document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}
<p>A script on this page starts this clock:</p>
<p id="demo"></p>
<button onclick="clearInterval(myVar)">Stop time</button>

http://www.w3schools.com/js/tryit.asp?filename=tryjs_setinterval3

相关文章：