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

时间:2013-04-30 06:29:03

标签: javascript

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

我想自动刷新页面以显示秒数的变化。怎么做?请帮我。

3 个答案:

答案 0 :(得分:2)

首先,您可能不应该使用document.write()。它主要被认为是不好的做法。你最好在HTML中使用容器元素(例如<div>)。然后,您可以设置此innerHTML的{​​{1}}。

接下来,您不必每隔一秒刷新一次页面。使用<div>功能。它接受一个函数和一个间隔,让你可以在给定函数再次运行的时间之后设置它。

在您的HTML中,您只需要一个setInterval()元素。

<div>

在JavaScript中,定义一个函数,将当前日期写入容器元素,并使用setInterval每秒调用一次(1000毫秒)。

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

您可以在此jSFiddle中看到它的实际效果。

答案 1 :(得分:0)

这里的自动刷新不是一个好主意。有更好的方法。但是,如果你坚持,请使用:

window.location.reload();

更好的方法是将其包装在函数中并在其上调用window.setIntervalwindow.setTimeout。请注意,setInterval注册一个定期计时器,而setTimeout只会注册一次注册函数。像这样更改你的代码:

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

答案 2 :(得分:0)

试试这个(请注意,您应该使用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>