如何使Javascript时间自动更新

我使用下面的JavaScript代码来显示我的网站上的时间。我如何自动进行此更新。如何使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>

来源

2012-05-06 jameswildi

什么有这个做PHP？ – Sietse

使用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);

来源

2012-05-06 13:23:40 SuperSaiyan

有很多时钟图书馆在那里。也许看看这个以前的帖子：How to create a jquery clock timer

来源

2012-05-06 13:25:24 Recognizer

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

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

来源

2012-05-06 13:28:24

避免'setInterval'：http://weblogs.asp.net/bleroy/archive/2009/05/14/setinterval-is-moderately-evil.aspx – KooiInc

请写出完整的东西。标题是'setinterval（适度）邪恶'。我读了整篇文章。这里强调的唯一一个主要的负面问题是关于调试 - 如果您使用调试器的“Step over”功能，这根本不是主要问题。其次，我使用了setInterval，因为它不管前一个调用是否被执行都执行，并且因为这是一个时钟，prev调用并不重要。实际上setTimeout在这里完全可以工作，这只是让我使用setInterval的直觉。 –

还有一件事，由于字符的限制，我不得不在单独的评论中声明，重新注册函数只会增加代码的复杂性（尽管几乎没有，嘿嘿）。所以，正如我刚才所说，这部分是本能的，部分代码复杂性让我更喜欢setInterval。 –

添加您所有的JavaScript代码在一个名为updateClock()放置在你的页面的<head>部分功能，并改变<body>标签这样：

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

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

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

当然，这个只是众多gazillions解决方案，你可以找到一个out there。

来源

2012-05-06 13:29:07

少一点凌乱将是：

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定时器功能之内。

看到它in action

来源

2012-05-06 13:45:40 KooiInc

-1

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>

来源

2016-05-28 00:22:58 Amornbordee

/*this code output format->00:00:00 and refresh automatically like real       time clock,hope it works..*/ 
<script> 
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; 
} 
</script>

来源

2016-11-07 05:05:29

提供了一些解释。 – Zeina

如何使Javascript时间自动更新

回答

相关问题