javascript / jquery时间倒计时

时间:2010-02-08 13:19:40

标签: javascript jquery time countdown

我想使用纯Javascript创建一个函数,或者也可以从jquery中获益,以计算结束时间,例如:

//consumes a javascript date object
function countDown(endtimme){
...
}

它应该以html显示,例如

<div id="time_left_box">
    <h1>Time remaining</h1>:

    <p>hours left: ..remaining day will be here## <p>
    <p>minutes left: ##remaining day will be here## <p>
    <p>seconds left: ##remaining day will be here## <p>
</div>

事实上,如果能够每秒刷新一次,那就更好了。

我对javascript非常天真并且对如何处理感到困惑,任何帮助都会很感激。

3 个答案:

答案 0 :(得分:7)

您可以使用jQuery Countdown

答案 1 :(得分:5)

答案 2 :(得分:2)

可以在没有插件的情况下在JavaScript中完成。

您需要获取当前日期时间,直至小于您显示的分母。举个例子,这意味着你需要把所有东西都缩短到几毫秒。

var currentTime = new Date(n.getFullYear(), n.getMonth(), n.getDate(), n.getHours(), n.getMinutes(), n.getSeconds(), n.getMilliseconds());

然后,您可以找到现在和所需时间之间的差异。这是以毫秒为单位给出的。

var diff = endtime - currentTime;

因为这是以毫秒为单位返回的,所以需要将它们转换为秒,分钟,小时,天等...这意味着确定每个分母中有多少毫秒。然后你可以使用mod和divide来返回每个单元所需的数量。见下文。

var miliseconds = 1;
var seconds = miliseconds * 1000;
var minutes = seconds * 60;
var hours = minutes * 60;
var days = hours * 24;
var years = days * 365;

//Getting the date time in terms of units
//Floored so that they go together (to get just year/days/hours etc.. by themselves you need to use Math.round(diff/desired unit);
var numYears = Math.floor(diff / years);
var numDays = Math.floor((diff % years) / days);
var numHours = Math.floor((diff % days) / hours);
var numMinutes = Math.floor((diff % hours) / minutes);
var numSeconds = Math.round((diff % minutes) / seconds);

一旦有了想要显示的分母,就可以通过不同的方法将其返回到html页面。例如:

document.getElementById("tyears").innerHTML = numYears;

总结了你的方法。但是,要使其在设置的时间间隔内运行(这就是为什么要更新JavaScript函数中的HTML显示),您需要调用以下函数,给出函数名称并以毫秒为单位提供间隔。

//Call the count down timer function every second (measured in miliseconds)
setInterval(countDown(endtime), 1000);