使用moment.js和setInterval的动态日期和时间

时间:2022-03-02 16:00:28

I'm trying to find out how I can display dynamic date and time using moment.js.

我试图找出如何使用moment.js显示动态日期和时间。

Apparently I can't figure out to use setInterval properly.

显然我无法理解正确使用setInterval。

If possible I'd prefer not to use jQuery as moment.js dosn't need it.

如果可能的话我宁愿不使用jQuery作为moment.js也不需要它。

Here's what I have so far: http://jsfiddle.net/37fLF/2/.

这是我到目前为止所拥有的:http://jsfiddle.net/37fLF/2/。

$(document).ready(function () {
    var datetime = $('#datetime'),
        date = moment(new Date()),
        update = function(){
            datetime.html(date.format('dddd, MMMM Do YYYY, h:mm:ss a'));
        };
    update();
    setInterval(update, 1000);
});​

4 个解决方案

#1


22  

I've made a few modifications in your code:

我在你的代码中做了一些修改:

Note that the method update is now outside the ready event handler

请注意,方法更新现在位于ready事件处理程序之外

code:

var datetime = null,
        date = null;

var update = function () {
    date = moment(new Date())
    datetime.html(date.format('dddd, MMMM Do YYYY, h:mm:ss a'));
};

$(document).ready(function(){
    datetime = $('#datetime')
    update();
    setInterval(update, 1000);
});

working demo: jsfiddle

工作演示:jsfiddle

#2


3  

Again, thanks for your answers. The code I ended up with follows. (Note danish i18n)

再次,谢谢你的回答。我最终得到的代码如下。 (注意丹麦语i18n)

moment.lang('da');

var datetime = null, date = null;

var datetime_update = function() {
  date = moment(new Date());
  datetime.html(date.format('[Lige nu: ] dddd [d.] Do MMMM YYYY [kl.] HH:mm:ss'));
};

$(document).ready(function() {
  datetime = $('#datetime');
  datetime_update();
  setInterval(datetime_update, 1000);
});

EDIT: Here nine months after I asked this quesiton I figured out this way to do it without jQuery (as I initially asked). Here it is:

编辑:在我问这个问题九个月后,我想出了这种方法,没有jQuery(我最初的问题)。这里是:

function date_time() {
  now = moment().format('dddd [d.] Do MMMM YYYY [kl.] HH:mm:ss');
  document.getElementById('timer').innerHTML = now;
  setTimeout(function () { date_time(); }, 1000);
}
date_time();

And then of course use it with an HTML ID like:

然后当然使用HTML ID,如:

<span id="timer"></span>

#3


2  

Put

date = moment(new Date());

inside the update function. Now you're just printing the same date every second ;)

更新功能内部。现在你只是每秒打印相同的日期;)

#4


0  

This is how it goes by me and its working u can check it here

这就是我的工作方式和它的工作原理你可以在这里查看

HTML

< asp:Label ID="Label1" runat="server" Text='' >

JavaScript
< script language="javascript" type="text/javascript">
function date_time() 
{
var dt = new Date();
document.getElementById('<%=Label1.ClientID%>').innerHTML = dt;
setTimeout(function () { date_time(); }, 1000);
}
date_time();
< /script>

#1


22  

I've made a few modifications in your code:

我在你的代码中做了一些修改:

Note that the method update is now outside the ready event handler

请注意,方法更新现在位于ready事件处理程序之外

code:

var datetime = null,
        date = null;

var update = function () {
    date = moment(new Date())
    datetime.html(date.format('dddd, MMMM Do YYYY, h:mm:ss a'));
};

$(document).ready(function(){
    datetime = $('#datetime')
    update();
    setInterval(update, 1000);
});

working demo: jsfiddle

工作演示:jsfiddle

#2


3  

Again, thanks for your answers. The code I ended up with follows. (Note danish i18n)

再次,谢谢你的回答。我最终得到的代码如下。 (注意丹麦语i18n)

moment.lang('da');

var datetime = null, date = null;

var datetime_update = function() {
  date = moment(new Date());
  datetime.html(date.format('[Lige nu: ] dddd [d.] Do MMMM YYYY [kl.] HH:mm:ss'));
};

$(document).ready(function() {
  datetime = $('#datetime');
  datetime_update();
  setInterval(datetime_update, 1000);
});

EDIT: Here nine months after I asked this quesiton I figured out this way to do it without jQuery (as I initially asked). Here it is:

编辑:在我问这个问题九个月后,我想出了这种方法,没有jQuery(我最初的问题)。这里是:

function date_time() {
  now = moment().format('dddd [d.] Do MMMM YYYY [kl.] HH:mm:ss');
  document.getElementById('timer').innerHTML = now;
  setTimeout(function () { date_time(); }, 1000);
}
date_time();

And then of course use it with an HTML ID like:

然后当然使用HTML ID,如:

<span id="timer"></span>

#3


2  

Put

date = moment(new Date());

inside the update function. Now you're just printing the same date every second ;)

更新功能内部。现在你只是每秒打印相同的日期;)

#4


0  

This is how it goes by me and its working u can check it here

这就是我的工作方式和它的工作原理你可以在这里查看

HTML

< asp:Label ID="Label1" runat="server" Text='' >

JavaScript
< script language="javascript" type="text/javascript">
function date_time() 
{
var dt = new Date();
document.getElementById('<%=Label1.ClientID%>').innerHTML = dt;
setTimeout(function () { date_time(); }, 1000);
}
date_time();
< /script>