如何自动刷新页面以显示秒数变化？

Question

<html>
<script language="javascript"> 
today = new Date(); 
document.write("<BR>The time now is: ", today.getHours(),":",today.getMinutes(),":",today.getSeconds()); 
document.write("<BR>The date is: ", today.getDate(),"/",today.getMonth()+1,"/",today.getYear()); 
</script> 
</html>

I'd like to autorefresh the page to show the change in the seconds. 我想自动刷新页面以显示更改（以秒为单位）。 How to do it? 怎么做？ Please help me. 请帮我。

Answer 1

First of all, you probably shouldn't use document.write(). 首先，您可能不应该使用document.write（）。 It is mostly considered bad practice. 通常认为这是不良做法。 You'd be better off using a container element in your HTML (eg a <div> ). 您最好在HTML中使用容器元素（例如<div> ）。 You can then set the innerHTML of this <div> . 然后，您可以设置此<div>的innerHTML 。

Next up, you don't have to refresh the page every single second. 接下来，您不必每秒钟刷新一次页面。 Use a setInterval() function. 使用setInterval()函数。 It accepts a function and an interval that lets you set after what time the given function should be running again. 它接受一个函数和一个时间间隔，该间隔使您可以设置给定函数应在什么时间后再次运行。

In your HTML, all you need is a <div> element. 在HTML中，您只需要一个<div>元素。

<div id="time"></div>

In your JavaScript, define a function that writes the current date into the container element and use setInterval to call it every second (1000ms). 在您的JavaScript中，定义一个将当前日期写入容器元素的函数，并使用setInterval每秒（1000ms）对其进行调用。

var time = document.getElementById('time');

function writeDate () {
    var today = new Date();
    time.innerHTML = "The time now is: " + today.getHours() +":" + today.getMinutes() + ":" + today.getSeconds();
    time.innerHTML += "<br>The date is: " + today.getDate() + "/" + (today.getMonth() + 1) + "/" + today.getFullYear();
}

setInterval(writeDate, 1000);

You can see it in action in this jSFiddle . 您可以在此jSFiddle中看到它的实际作用。

Answer 2

Auto-refreshing here isn't a good idea. 在此处自动刷新不是一个好主意。 There are better approaches. 有更好的方法。 However, if you insist, use: 但是，如果您坚持使用，请使用：

window.location.reload();

A better way would be to wrap that in a function and call window.setInterval or window.setTimeout on it. 更好的方法是将其包装在函数中，然后在其上调用window.setInterval或window.setTimeout 。 Note that setInterval registers a recurring timer while setTimeout will call the registered function only once. 请注意， setInterval注册一个循环计时器，而setTimeout将仅调用一次已注册的函数。 Change your code like this: 像这样更改代码：

<head>
<script language="text/javascript">
function doIt() {
    var today = new Date();
    document.getElementById("output").innerHTML = "The time now is: " +
        today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds() + 
        "<br />The date is: " + today.getDate() + "/" + ( today.getMonth() + 1 ) +
        "/" + today.getYear();
}
window.setInterval(doIt, 1000);
// Alternatively you can use:
//window.setInterval("doIt()", 1000); // This is what you usually learn first...
</script>
</head>
<body>
    <div id="output"></div>
</body>

Answer 3

Try This (Note you should use getFullYear instead of getYear ): 试试这个（注意，您应该使用getFullYear而不是getYear ）：

<html>
    <head>
        <title>Date Time</title>
    </head>
    <body>
        <div id = 'time'><div>
        <script language="javascript">
            function getCurrentTime()
            {
                var today = new Date();
                var hours = today.getHours();
                if (hours <= 9){
                    hours = '0' + hours;
                }
                var minutes = today.getMinutes();
                if (minutes <= 9){
                    minutes = '0' + minutes;
                }
                var seconds = today.getSeconds();
                if (seconds <= 9){
                    seconds = '0' + seconds;
                }
                return hours + ":" + minutes + ":" + seconds;
            }

            function getCurrentDate()
            {
                var today = new Date();
                var days = today.getDate();
                if (days <= 9){
                    days = '0' + days;
                }
                var months = today.getMonth() + 1;
                if (months <= 9){
                    months = '0' + months;
                }
                var years = today.getFullYear();
                if (years <= 9){
                    years = '0' + years;
                }
                return days + "/" + months + "/" + years;
            }

            function updateDateTime()
            {
                document.getElementById('time').innerHTML = '<br />The time now is: ' + getCurrentTime() +
                                                            '<br />The date is: ' + getCurrentDate();
                setTimeout(updateDateTime, 1000);
            }

            updateDateTime();
        </script>
    </body>
</html>

如何自动刷新页面以显示秒数变化？

问题描述

3 个解决方案

解决方案1
2 已采纳 2013-04-30 06:42:05

解决方案2
0 2013-04-30 06:38:47

解决方案3
0 2013-04-30 06:47:19

如何自动刷新页面以显示秒数变化？

问题描述

3 个解决方案

解决方案1 2 已采纳 2013-04-30 06:42:05

解决方案2 0 2013-04-30 06:38:47

解决方案3 0 2013-04-30 06:47:19

解决方案1
2 已采纳 2013-04-30 06:42:05

解决方案2
0 2013-04-30 06:38:47

解决方案3
0 2013-04-30 06:47:19