如何定期更新时间？

Question

function timeClock() 
{ 
    setTimeout("timeClock()", 1000);   
    now = new Date(); 
    alert(now); 
    f_date = now.getDate()+" "+strMonth(now.getMonth())+" "+now.getFullYear()+"/"+timeFormat(now.getHours(), now.getMinutes()); 
    return f_date; 
} 

<span class="foo"><script type="text/javascript">document.write(timeClock());</script></span> 

alert（now）;每秒给我一个值，但它不会在html中更新。如何在不更新页面的情况下更新html上的时间？

Answer 1

有一些在你的代码错误。如果你的变量声明的前面没有使用var，你可以将它们泄漏到全局范围中。

此外，使用document.write是discouraged。

这是我会怎么做：

的JavaScript：

function updateClock() { 
    var now = new Date(), // current date 
     months = ['January', 'February', '...']; // you get the idea 
     time = now.getHours() + ':' + now.getMinutes(), // again, you get the idea 

     // a cleaner way than string concatenation 
     date = [now.getDate(), 
       months[now.getMonth()], 
       now.getFullYear()].join(' '); 

    // set the content of the element with the ID time to the formatted string 
    document.getElementById('time').innerHTML = [date, time].join('/'); 

    // call this function again in 1000ms 
    setTimeout(updateClock, 1000); 
} 
updateClock(); // initial call 

HTML：

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

Answer 2

x = document.getElementsByTagName('SPAN').item(0); 
x.innerHTML = f_date; 

尝试把这个代码块，而不是return声明，我没有测试它，但它可能会工作

Answer 3

可能有东西在TIMEAGO jQuery插件，你可以挂接到，但我没有诚实尝试...

http://timeago.yarp.com/

Answer 4

function timeClock() 
{ 
    setTimeout("timeClock()", 1000);   
    now = new Date(); 
    alert(now); 
    f_date = now.getDate()+" "+strMonth(now.getMonth())+" "+now.getFullYear()+"/"+timeFormat(now.getHours(), now.getMinutes()); 

    document.getElementById("foo").innerHTML = f_date; 

} 

<span id="foo"></span> 

Answer 5

$('span.foo').html(f_date); 

这个地方你timeclock()函数内部

未经检验

function timeClock() 
    { 
     setTimeout("timeClock()", 1000);   
     now = new Date(); 
     alert(now); 
     f_date = now.getDate()+" "+strMonth(now.getMonth())+" "+now.getFullYear()+"/"+timeFormat(now.getHours(), now.getMinutes()); 
     $('span.foo').html(f_date); 

} 

Answer 6

我会使用的setInterval，而不是setTimeout的：

https://developer.mozilla.org/en/DOM/window.setInterval

Answer 7

我觉得你setTmeout功能有错误的变量，第一个应该是一个函数而不是一个字符串，这让我困惑了一下。基本上你需要在运行函数时写入span标签。

我在小提琴中创建了一个jQuery版本来演示我的意思。没有你的strMonth功能，但你明白了。我还将警报更改为console.log，但可以删除该行。

http://jsfiddle.net/5JWEV/

Answer 8

的setInterval（表达式，超时）;

函数setTimeout用于单个超时，所以使用setInterval将是一个更合适的选项。 SetInterval将定期运行，而不需要Ivo的答案。

我会改写伊沃的回答如下：

的JavaScript：

function updateClock() { 
    // Ivo's content to create the date. 
    document.getElementById('time').innerHTML = [date, time].join('/') 
} 
setInterval(updateClock, 1000); 

自己试试它了！ https://jsfiddle.net/avotre/rtuna4x7/2/

Answer 9

Straigt的Javascript时间格式/更新

1：创建月变换器FUNC 2：创建时间FUNC 3：创建更新FUNC 4：创建输出FUNC

// month converter from index/0-11 values 
function covertMonth(num){ 
    let months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']; 
    // look into index with num 0-11 
    let computedRes = months[num]; 
    return computedRes; 
} 

// time func 
function Time(){ 
    // important to get new instant of the Date referrance 
    let date = new Date(); 
    this.time = date.toLocaleTimeString(); 
    this.year = date.getUTCFullYear(); 
    this.day = date.getUTCDate(); 
    this.month = date.getUTCMonth(); 
    this.currentTime = date.toLocaleTimeString() + ' ' + covertMonth(this.month) + ' ' + this.day + ' ' + this.year; 
    return this.currentTime; 
} 


function timeOutPut(){ 
    let where = document.getElementById('some-id'); 
    where.textContent = Time(); // 1:21:39 AM Dec 17 2017 
} 

    // run every 5secs 
setInterval(timeOutPut, 5000);