如何使Javascript时间自动更新

How to make Javascript time automatically update

本文关键字：更新 时间 何使 Javascript      更新时间：2023-09-26

我正在使用以下Javascript代码在我的网站上显示时间。如何自动进行此更新。

谢谢

<section class="portlet grid_6 leading"> 
<header>
<h2>Time<span id="time_span"></span></h2>
</header>
<script type="text/javascript">
var currentTime = new Date()
var hours = currentTime.getHours()
var minutes = currentTime.getMinutes()
if (minutes < 10){
    minutes = "0" + minutes
}
var t_str = hours + ":" + minutes + " ";
if(hours > 11){
    t_str += "PM";
} else {
   t_str += "AM";
}
document.getElementById('time_span').innerHTML = t_str;
</script>
</section>

使用 setTimeout（..） 在特定时间后调用函数。在这种特定情况下，最好使用 setInterval（..）

function updateTime(){
    var currentTime = new Date()
    var hours = currentTime.getHours()
    var minutes = currentTime.getMinutes()
    if (minutes < 10){
        minutes = "0" + minutes
    }
    var t_str = hours + ":" + minutes + " ";
    if(hours > 11){
        t_str += "PM";
    } else {
        t_str += "AM";
    }
    document.getElementById('time_span').innerHTML = t_str;
}
setInterval(updateTime, 1000);
将所有

javascript 代码添加到一个名为 updateClock() 的函数中，该函数放置在页面的<head>部分，并以这种方式更改<body>标签：

<body onload="updateClock(); setInterval('updateClock()', 1000 )">

它将每秒重新计算并重新显示时间。由于仅显示小时和分钟，因此可以使用更长的间隔。如果你想每numSeconds更新一次时间，你应该使用类似的东西

<body onload="updateClock(); setInterval('updateClock()', numSeconds * 1000 )">

当然，这只是您可以在那里找到的众多解决方案之一。

那里有很多时钟库。也许看看之前的这篇文章：如何创建一个jquery时钟计时器<</p>

div class="answers">

试试这个，一个更整洁的版本：

var el = document.getElementById('time_span')
setInterval(function() {
    var currentTime = new Date(),
        hours = currentTime.getHours(),
        minutes = currentTime.getMinutes(),
        ampm = hours > 11 ? 'PM' : 'AM';
    hours += hours < 10 ? '0' : '';
    minutes += minutes < 10 ? '0' : '';
    el.innerHTML = hours + ":" + minutes + " " + ampm;
}, 1000);


GetTime();
function GetTime(){
  var CurrentTime = new Date()
  var hour = CurrentTime.getHours()
  var minute = CurrentTime.getMinutes()
  var second = CurrentTime.getSeconds()
  if(minute < 10){
    minute = "0" + minute
  }
  if(second < 10){
    second = "0" + second
  }
  var GetCurrentTime = hour + ":" + minute + ":" + second + " ";
  if(hour > 11){
    GetCurrentTime += "p.m."
  }else{
    GetCurrentTime += "a.m."
  }
  document.getElementById("CurrentTime").innerHTML = GetCurrentTime;
  setTimeout(GetTime,1000)
}
<span id="CurrentTime"></span>

稍微不那么混乱的是：

timer();
function timer(){
 var now     = new Date,
     hours   = now.getHours(),
     ampm    = hours<12 ? ' AM' : ' PM',
     minutes = now.getMinutes(),
     seconds = now.getSeconds(),
     t_str   = [hours-12, //otherwise: what's the use of AM/PM?
                (minutes < 10 ? "0" + minutes : minutes),
                (seconds < 10 ? "0" + seconds : seconds)]
                 .join(':') + ampm;
 document.getElementById('time_span').innerHTML = t_str;
 setTimeout(timer,1000);
}

计时器每秒（大约）更新一次（= 1000 毫秒），使用计时器函数中的setTimeout。

查看实际效果

此代码输出格式->00：00：00 并像实时时钟一样自动刷新，希望它有效。

function r(txt) {
    document.write(tex);
}
function createTIME() {
    d = new Date();
    var time = addZERO(d.getHours()) + ':' + addZERO(d.getMinutes()) + ':' + addZERO(d.getSeconds());
    return 'Present Time = ' + time;
}
function doDyn() {
    document.getElementById('Dyn').innerHTML = createTIME();
}
function addZERO(val) {
    return ((val < 10) ? '0' : '') + val;
}


GetTime();
function GetTime(){
  var CurrentTime = new Date()
  var hour = CurrentTime.getHours()
  var minute = CurrentTime.getMinutes()
  var second = CurrentTime.getSeconds()
  if(minute < 10){
    minute = "0" + minute
  }
  if(second < 10){
    second = "0" + second
  }
  var GetCurrentTime = hour + ":" + minute + ":" + second + " ";
  if(hour > 11){
    GetCurrentTime += "p.m."
  }else{
    GetCurrentTime += "a.m."
  }
<!-- Try changing innerHTML to document.getElementById("CurrentTime").value -->
  document.getElementById("CurrentTime").value = GetCurrentTime;
  setTimeout(GetTime,1000)
}
<span id="CurrentTime"></span>

timer();
function timer(){
 var currentTime = new Date()
var hours = currentTime.getHours()
var minutes = currentTime.getMinutes()
var sec = currentTime.getSeconds()
if (minutes < 10){
    minutes = "0" + minutes
}
if (sec < 10){
    sec = "0" + sec
}
var t_str = hours + ":" + minutes + ":" + sec + " ";
if(hours > 11){
    t_str += "PM";
} else {
   t_str += "AM";
}
 document.getElementById('time_span').innerHTML = t_str;
 setTimeout(timer,1000);
}
<header>
<h2>Time<span id="time_span"></span></h2>
</header>

相关文章：