使用Javascript创建倒计时
我在搜索中找到了这个来创建JavaScript倒计时,但它似乎不适用于我。我很惊讶,因为似乎没有其他人报告有问题。我必须错过一些根本性的东西,我不知道还有什么可以转身,但在这里。使用Javascript创建倒计时
https://gist.github.com/nithinbekal/299417
下面是代码住的jsfiddle似乎它并不工作对我来说,无论是。
function updateWCTime() {
now = new Date();
kickoff = Date.parse("April 27, 2013 09:00:00");
diff = kickoff - now;
days = Math.floor(diff/(1000*60*60*24));
hours = Math.floor(diff/(1000*60*60));
mins = Math.floor(diff/(1000*60));
secs = Math.floor(diff/1000);
dd = days;
hh = hours - days * 24;
mm = mins - hours * 60;
ss = secs - mins * 60;
document.getElementById("countdown")
.innerHTML =
dd + ' days ' +
hh + ' hours ' +
mm + ' minutes ' +
ss + ' seconds';
}
setInterval('updateWCTime()', 1000);
变化的时间间隔(现场小提琴:http://jsfiddle.net/96TWk/1/)
setInterval(updateWCTime, 1000);
控制台说,功能updateWCTime
没有找到,我不excactly知道为什么。 Cu's似乎没问题。
您可以通过修复你的jsfiddle更改为:
setInterval(updateWCTime, 1000);
或通过改变从onload
中的jsfiddle左侧面板上的设置任一no wrap
选项。以下是仅将jsFiddle左侧面板设置更改为“无换行”的演示:http://jsfiddle.net/jfriend00/rdj96/
下面是为什么它不起作用的解释。当你传递一个字符串setInterval()
这样的:
setInterval('updateWCTime()', 1000);
JavaScript的intepreter使用eval()
评估字符串,该函数必须在全球范围内被发现。但是,因为您在jsFiddle的左侧面板中有onload
,所以您的所有javascript都在另一个函数内(例如不是全局的),所以eval()
找不到该函数。
改变你的代码
setInterval(updateWCTime, 1000);
允许JavaScript只是使用普通的函数引用,然后可以找到功能在本地范围内(不必须是全球性的)。
仅供参考,你应该几乎不会传递一个字符串到setInterval()
。
我会提出一种完全不同的倒数计时器的方法;带回调的发电机。起初你可能会想,为什么我会这样做?但是使用生成器可以为重复使用的东西节省大量代码。我也使用window.setTimeout
这是为了确保您的回调花费的时间比您的间隔时间更长,确保您不会发生令人讨厌的事情。
通过代码的评论应该有助于你理解发生了什么。
// createCountDown(Date end_time [, Function callback, Integer ms_interval])
// returns an Object properties: ms, ss, mm, hh, dd, MM, yy, timer (current)
// same Object is passed as parameter 1 to callback
function createCountDown(time, callback, ms) {
var future = time.valueOf(), // cache these to save re-calling them later
f_ms = time.getUTCMilliseconds(),
f_ss = time.getUTCSeconds(),
f_mm = time.getUTCMinutes(),
f_hh = time.getUTCHours(),
f_dd = time.getUTCDate(),
f_MM = time.getUTCMonth(),
f_yy = time.getUTCFullYear(),
o = {timer: null}; // an object to make life easier
var f = function() { // the function that will handle the setTimeout loops
var d = new Date(), // the current time of each loop
remain = future - d.valueOf(); // difference (in ms)
if (remain > 0) {
// Totals
o['total_ms'] = remain; // if you'll never need all these, you can
o['total_ss'] = remain/ 1000 | 0; // comment or cut them out
o['total_mm'] = remain/ 60000 | 0;
o['total_hh'] = remain/3600000 | 0;
o['total_dd'] = remain/86400000 | 0;
// Differences (via UTC)
o['ms'] = (1000 + f_ms - d.getUTCMilliseconds()) % 1000; // same
o['ss'] = ( 60 + f_ss - d.getUTCSeconds() ) % 60;
o['mm'] = ( 60 + f_ss - d.getUTCMinutes() ) % 60;
o['hh'] = ( 24 + f_hh - d.getUTCHours() ) % 24;
o['dd'] = ( f_dd - d.getUTCDate() ) ; // below
o['MM'] = ( 12 + f_MM - d.getUTCMonth() ) % 12;
o['yy'] = ( f_yy - d.getUTCFullYear() ) ;
if (o['dd'] < 0) { // fix for negative days
d.setUTCMonth(d.getUTCMonth() + 1);
d.setUTCDate(0); // using number of days in current month
o['dd'] + d.getUTCDate();
}
callback(o); // invoke your callback
o.timer = window.setTimeout(f, ms); // set up next loop
}
}
ms || ms === 0 || (ms = 200); // default ms if not set
callback || (callback = function() {}); // default empty fn
f(); // start off the whole looping
return o;
}
现在写您的callback
,这是要短得多,因为你已经有了长远的东西的方式进行。 console.log
使说明性的目的很容易。
function updateWCTime(o) {
console.log(
o['total_dd'] + ' days ' +
o['hh'] + ' hours ' +
o['mm'] + ' minutes ' +
o['ss'] + ' seconds'
);
}
最后,启动它。
createCountDown(new Date("April 27, 2013 09:00:00"), updateWCTime);
您可能还想考虑'if(false!== callback(o))o.timer = window.setTimeout(f,ms);',即返回_callback_中的'false'会停止倒计时。我已经足够过分了,所以这是一个评论。 – 2013-04-21 14:34:48
另外,如果你想要一个动作在达到'0'时发生,那么例如或者为第二个函数添加一个新参数(或者将'o'中的值设置为'0'以用于相同的回调)并添加一个'else'以匹配if(remain> 0){',然后调用它。 – 2013-04-21 14:42:12
啊,谢谢你打破了! Niels发现了这个问题,但我很高兴你解释了它背后的推理。 – Marlon 2013-04-21 13:05:59
我将自己的评论改为了答案,因为其中的解释实际上不仅仅是评论的答案。 – jfriend00 2013-04-21 13:09:29