blocks|key|578875|text|将所有javascript代码添加到一个名为updateClock()的函数中，该函数位于页面的<head>部分，并以这种方式更改<body>标记：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|578876|<body+onload="updateClock();+setInterval('updateClock()',+1000+)">|code-block|syntax|javascript|578877|它会每秒重新计算和重新显示时间。由于只显示小时和分钟，因此可以使用更长的时间间隔。如果你想更新每个numSeconds的时间，你应该使用类似这样的东西|578878|<body+onload="updateClock();+setInterval('updateClock()',+numSeconds+*+1000+)">|578879|当然，这只是你可以找到的众多out+there解决方案中的一个。|578880|entityMap|0|LINK|mutability|MUTABLE|url|https://www.google.com/#hl=en&q=javascript%2520clock^0|M|D|1C|6|1T|6|0|0|1D|A|0|0|E|9|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@$9|Z|A|10|B|C]|$9|11|A|12|B|C]|$9|13|A|14|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|15|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|16|8|@$9|17|A|18|B|C]]|D|@]|E|$]]|$1|M|3|N|5|H|7|19|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|6|7|1A|8|@]|D|@$9|1B|A|1C|1|1D]]|E|$]]|$1|Q|3|-4|5|6|7|1E|8|@]|D|@]|E|$]]]|R|$S|$5|T|U|V|E|$W|X]]]]

<p>Add all your javascript code in a function called <code>updateClock()</code> placed in the <code>&lt;head&gt;</code> section of your page, and alter the <code>&lt;body&gt;</code> tag that way:</p>

<pre><code>&lt;body onload="updateClock(); setInterval('updateClock()', 1000 )"&gt;
</code></pre>

<p>It will recalculate and redisplay the time every second. Since you only display hours and minutes, you can use a longer interval. If you want to update time every <code>numSeconds</code> you should use something like</p>

<pre><code>&lt;body onload="updateClock(); setInterval('updateClock()', numSeconds * 1000 )"&gt;
</code></pre>

<p>And of course, this one is just one of many gazillions solutions that you can find <a href="https://www.google.com/#hl=en&amp;q=javascript%20clock" rel="nofollow">out there</a>.</p>


blocks|key|578622|text|外面有很多时钟库。也许可以看看之前的这篇文章：How+to+create+a+jquery+clock+timer|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|578623|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/2604450/how-to-create-a-jquery-clock-timer^0|N|Y|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

<p>There are plenty of clock libraries out there. Perhaps check out this previous post: <a href="https://stackoverflow.com/questions/2604450/how-to-create-a-jquery-clock-timer">How to create a jquery clock timer</a></p>


blocks|key|362974|text|试试这个，一个更整洁的版本：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|362975|var+el+=+document.getElementById('time_span')
setInterval(function()+{

++++var+currentTime+=+new+Date(),
++++++++hours+=+currentTime.getHours(),
++++++++minutes+=+currentTime.getMinutes(),
++++++++ampm+=+hours+>+11+?+'PM'+:+'AM';

++++hours+%2B=+hours+<+10+?+'0'+:+'';
++++minutes+%2B=+minutes+<+10+?+'0'+:+'';

++++el.innerHTML+=+hours+%2B+":"+%2B+minutes+%2B+"+"+%2B+ampm;
},+1000);|code-block|syntax|javascript|362976|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>try this, a tidier version:</p>

<pre><code>var el = document.getElementById('time_span')
setInterval(function() {

    var currentTime = new Date(),
        hours = currentTime.getHours(),
        minutes = currentTime.getMinutes(),
        ampm = hours &gt; 11 ? 'PM' : 'AM';

    hours += hours &lt; 10 ? '0' : '';
    minutes += minutes &lt; 10 ? '0' : '';

    el.innerHTML = hours + ":" + minutes + " " + ampm;
}, 1000);
</code></pre>


blocks|key|578973|text|稍微不那么混乱的是：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|578974|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"+%2B+minutes+:+minutes),
++++++++++++++++(seconds+<+10+?+"0"+%2B+seconds+:+seconds)]
+++++++++++++++++.join(':')+%2B+ampm;
+document.getElementById('time_span').innerHTML+=+t_str;
+setTimeout(timer,1000);
}|code-block|syntax|javascript|578975|使用定时器功能中的setTimeout，定时器(大致)每秒(=+1000毫秒)更新一次。|offset|length|style|CODE|578976|查看in+action，查看​|578977|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/KooiInc/zgcYz/^0|0|0|9|A|0|2|9|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@$I|Z|J|10|K|L]]|9|@]|A|$]]|$1|M|3|N|5|6|7|11|8|@]|9|@$I|12|J|13|1|14]]|A|$]]|$1|O|3|-4|5|6|7|15|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

<p>A bit less messy would be:</p>

<pre><code>timer();

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

<p>The timer updates (roughly) every second (= 1000 Ms), using <code>setTimeout</code> from within the timer function.</p>

<p>​See it <a href="http://jsfiddle.net/KooiInc/zgcYz/" rel="nofollow">in action</a></p>


blocks|key|579022|text|此代码输出格式->00:00:00，并能像实时时钟一样自动刷新，希望能正常工作。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|579023|function+r(txt)+{
++++document.write(tex);
}

function+createTIME()+{
++++d+=+new+Date();
++++var+time+=+addZERO(d.getHours())+%2B+':'+%2B+addZERO(d.getMinutes())+%2B+':'+%2B+addZERO(d.getSeconds());
++++return+'Present+Time+=+'+%2B+time;
}

function+doDyn()+{
++++document.getElementById('Dyn').innerHTML+=+createTIME();
}

function+addZERO(val)+{
++++return+((val+<+10)+?+'0'+:+'')+%2B+val;
}|code-block|syntax|javascript|579024|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>This code output format->00:00:00 and refresh automatically like real time clock, hope it works..</p>

<pre><code>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 &lt; 10) ? '0' : '') + val;
}
</code></pre>


blocks|key|363333|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|363334|GetTime();

function+GetTime(){
++var+CurrentTime+=+new+Date()
++var+hour+=+CurrentTime.getHours()
++var+minute+=+CurrentTime.getMinutes()
++var+second+=+CurrentTime.getSeconds()

++if(minute+<+10){
++++minute+=+"0"+%2B+minute
++}

++if(second+<+10){
++++second+=+"0"+%2B+second
++}

++var+GetCurrentTime+=+hour+%2B+":"+%2B+minute+%2B+":"+%2B+second+%2B+"+";

++if(hour+>+11){
++++GetCurrentTime+%2B=+"p.m."
++}else{
++++GetCurrentTime+%2B=+"a.m."
++}

++document.getElementById("CurrentTime").innerHTML+=+GetCurrentTime;
++setTimeout(GetTime,1000)
}|code-block|syntax|javascript|363335|<span+id="CurrentTime"></span>|363336|363337|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|M|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|I|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>GetTime();

function GetTime(){
  var CurrentTime = new Date()
  var hour = CurrentTime.getHours()
  var minute = CurrentTime.getMinutes()
  var second = CurrentTime.getSeconds()

  if(minute &lt; 10){
    minute = "0" + minute
  }

  if(second &lt; 10){
    second = "0" + second
  }

  var GetCurrentTime = hour + ":" + minute + ":" + second + " ";

  if(hour &gt; 11){
    GetCurrentTime += "p.m."
  }else{
    GetCurrentTime += "a.m."
  }

  document.getElementById("CurrentTime").innerHTML = GetCurrentTime;
  setTimeout(GetTime,1000)
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;span id="CurrentTime"&gt;&lt;/span&gt;</code></pre>
</div>
</div>
</p>


blocks|key|363353|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|363354|GetTime();

function+GetTime(){
++var+CurrentTime+=+new+Date()
++var+hour+=+CurrentTime.getHours()
++var+minute+=+CurrentTime.getMinutes()
++var+second+=+CurrentTime.getSeconds()

++if(minute+<+10){
++++minute+=+"0"+%2B+minute
++}

++if(second+<+10){
++++second+=+"0"+%2B+second
++}

++var+GetCurrentTime+=+hour+%2B+":"+%2B+minute+%2B+":"+%2B+second+%2B+"+";

++if(hour+>+11){
++++GetCurrentTime+%2B=+"p.m."
++}else{
++++GetCurrentTime+%2B=+"a.m."
++}

++document.getElementById("CurrentTime").value+=+GetCurrentTime;
++setTimeout(GetTime,1000)
}|code-block|syntax|javascript|363355|<span+id="CurrentTime"></span>|363356|363357|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|M|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|I|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>GetTime();

function GetTime(){
  var CurrentTime = new Date()
  var hour = CurrentTime.getHours()
  var minute = CurrentTime.getMinutes()
  var second = CurrentTime.getSeconds()

  if(minute &lt; 10){
    minute = "0" + minute
  }

  if(second &lt; 10){
    second = "0" + second
  }

  var GetCurrentTime = hour + ":" + minute + ":" + second + " ";

  if(hour &gt; 11){
    GetCurrentTime += "p.m."
  }else{
    GetCurrentTime += "a.m."
  }
&lt;!-- Try changing innerHTML to document.getElementById("CurrentTime").value --&gt;
  document.getElementById("CurrentTime").value = GetCurrentTime;
  setTimeout(GetTime,1000)
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;span id="CurrentTime"&gt;&lt;/span&gt;</code></pre>
</div>
</div>
</p>


blocks|key|578999|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|579000|timer();

function+timer(){
+var+currentTime+=+new+Date()
var+hours+=+currentTime.getHours()
var+minutes+=+currentTime.getMinutes()
var+sec+=+currentTime.getSeconds()
if+(minutes+<+10){
++++minutes+=+"0"+%2B+minutes
}
if+(sec+<+10){
++++sec+=+"0"+%2B+sec
}
var+t_str+=+hours+%2B+":"+%2B+minutes+%2B+":"+%2B+sec+%2B+"+";
if(hours+>+11){
++++t_str+%2B=+"PM";
}+else+{
+++t_str+%2B=+"AM";
}
+document.getElementById('time_span').innerHTML+=+t_str;
+setTimeout(timer,1000);
}|code-block|syntax|javascript|579001|<header>
<h2>Time<span+id="time_span"></span></h2>
</header>|579002|579003|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|M|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|I|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>timer();

function timer(){
 var currentTime = new Date()
var hours = currentTime.getHours()
var minutes = currentTime.getMinutes()
var sec = currentTime.getSeconds()
if (minutes &lt; 10){
    minutes = "0" + minutes
}
if (sec &lt; 10){
    sec = "0" + sec
}
var t_str = hours + ":" + minutes + ":" + sec + " ";
if(hours &gt; 11){
    t_str += "PM";
} else {
   t_str += "AM";
}
 document.getElementById('time_span').innerHTML = t_str;
 setTimeout(timer,1000);
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;header&gt;
&lt;h2&gt;Time&lt;span id="time_span"&gt;&lt;/span&gt;&lt;/h2&gt;
&lt;/header&gt;</code></pre>
</div>
</div>
</p>


<p>I am using the following Javascript code to display the time on my website. How can I make this update automatically.</p>

<p>Thanks</p>

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


How to make Javascript time automatically update

我正在使用以下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()

问如何使Javascript时间自动更新
EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使Javascript时间自动更新EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使Javascript时间自动更新
EN