用javascript刷新时间

refresh the time in javascript

本文关键字：时间 刷新 javascript      更新时间：2023-09-26

我一直在想如何在网页中自动刷新时间（而且只刷新时间），但我似乎无法获得。

这就是我所拥有的。

var d = new Date();
var weekday = d.getDay();
var day = d.getDate();
var month = d.getMonth() + 1; //JS says jan = 0
var year = d.getFullYear();
var minutes = d.getMinutes();
var hours = d.getHours() + 1; //eastern time zone
var seconds = d.getSeconds();
var ms = d.getMilliseconds();
function distime(minutes, hours, month, day, year) {
    if (minutes < 10) {
        var lowMin = "0" + minutes.toString();
        document.getElementById("timecode").innerHTML = hours.toString() + ':' + lowMin + ' ' + month.toString() + '/' + day.toString() + '/' + year.toString();
        alert("here");
    } else
        document.getElementById("timecode").innerHTML = hours.toString() + ':' + minutes + ' ' + month.toString() + '/' + day.toString() + '/' + year.toString();
    alert("here");
};
//      var clockTime = distime(minutes, hours, month, day, year);
function init(minutes, hours, month, day, year) {
    alert("init");
    distime(minutes, hours, month, day, year);
    setTimeout(distime, 10000);
};
var initTime = init(minutes, hours, month, day, year);

时间被附加到一个div中，用HTML表示，我不使用PHP。

我听说我需要使用ajax来实现这一点，但我不确定如何实现。

同样，我的问题是：如何每10秒刷新一次时间，使其在我的网站上正确显示。

谢谢！

下面可以看到解决我问题的更新代码。

var time = {};
(function () {
  var clock = document.getElementById('timecode');
  (function tick () {
    var minutes, d = new Date();
    time.weekday = d.getDay();
    time.day = d.getDate();
    time.month = d.getMonth() + 1; //JS says jan = 0
    time.year = d.getFullYear();
    time.minutes = d.getMinutes();
    time.hours = d.getHours() + 1; //eastern time zone
    time.seconds = d.getSeconds();
    time.ms = d.getMilliseconds();
    minutes = (time.minutes < 10 ? '0' + time.minutes : time.minutes);
    clock.innerHTML = time.hours + ':' + minutes + ' ' + time.month + '/' + time.day + '/' + time.year;
    window.setTimeout(tick, 1000);
  }()); // Note the parens here, we invoke these functions right away
}()); // This one keeps clock away from the global scope

感谢所有提供帮助的人！

将它们移动到一个函数：

function updateTime() {
  var d = new Date();
  var weekday = d.getDay();
  var day = d.getDate();
  var month = d.getMonth() + 1; //JS says jan = 0
  var year = d.getFullYear();
  var minutes = d.getMinutes();
  var hours = d.getHours() + 1; //eastern time zone
  var seconds = d.getSeconds();
  var ms = d.getMilliseconds();
  distime(minutes, hours, month, day, year);
}
setInterval(updateTime, 10000);

如果您需要程序其他部分的值，请将它们存储在某种全局状态中，并在时钟函数中更新这些值。

在本例中，我们将所有部分存储在一个名为time的对象中，这样可以最大限度地减少我们创建的全局变量数量。然后，我们可以稍后访问这些属性：time.ms等。为了准确起见，您的时钟应该更频繁地计时，而不是不计时——每秒一次呼叫不会对性能造成很大影响，而且会使您的分钟数保持在一分钟的最前。

另一件需要注意的事情是，在JavaScript中，当您将数字添加到字符串中时，该数字将被强制转换为字符串，因此实际上不需要事先调用.toString()。

var time = {};
(function () {
  var clock = document.getElementById('clock');
  
  (function tick () {
    var minutes, d = new Date();
    time.weekday = d.getDay();
    time.day = d.getDate();
    time.month = d.getMonth() + 1; //JS says jan = 0
    time.year = d.getFullYear();
    time.minutes = d.getMinutes();
    time.hours = d.getHours() + 1; //eastern time zone
    time.seconds = d.getSeconds();
    time.ms = d.getMilliseconds();
    
    minutes = (time.minutes < 10 ? '0' + time.minutes : time.minutes);
    
    clock.innerHTML = time.hours + ':' + minutes + ' ' + time.month + '/' + time.day + '/' + time.year;
    
    window.setTimeout(tick, 1000);
  }()); // Note the parens here, we invoke these functions right away
}()); // This one keeps clock away from the global scope
console.log(time.ms); // We have access to all those properties via a single variable.
<div id="clock"></div>

function updateTime() {
//Your function that prints time and replace the old time
// call this function again in 10000ms
setTimeout(updateTime, 10000); }

使用下面的行在您的页面上调用此函数。

updateTime(); //initial call

希望能有所帮助。

<div id="dvNow"></div>
 <input type="button" value="Time" onclick="init()" />
 <script type="text/javascript">
        function init() {
            setTimeout(distime, 1000);
            setTimeout(init, 1000);
        };
        function distime() {
            var now = new Date();
            var sDateTime = now.toLocaleString();
            $("#dvNow").html(sDateTime);
        }
 </script>

该功能只更新Div#dvNow元素，无需刷新整个页面

<script type="text/javascript">
        init();
        function init() {
            setTimeout(distime, 1000);
            setTimeout(init, 1000);
        };
        function distime() {
            var now = new Date();
            //var sDateTime = now.toLocaleString();
            var sDateTime = now.toDateString() + " " + now.toLocaleTimeString()
            $("#dvNow").html(sDateTime);
        }
    </script>

init（）函数将在页面加载时开始执行。日期和时间戳可以自定义。

相关文章：