多个事件的Jquery倒计时计时器
多个事件的Jquery倒计时计时器
提问于 2011-11-18 04:05:46
这就是我的问题。我正在为一个会议大厅的网站编码。客户希望在主页上对下一次会议进行倒计时。我想我应该在http://keith-wood.name/countdown.html上使用Jquery Countdown插件，因为它有我需要的一切。但是，由于会议大厅每天有多个会议，我需要它在到期时倒计时到下一次会议。我知道每天所有会议的日期和时间，但我不知道到期后如何切换到下一次会议。有什么想法吗？
回答 2
Stack Overflow用户
回答已采纳
发布于 2011-11-18 15:25:14
这不是一个像Keith Wood那样的40Kb解决方案。但是，在玩了5个小时的代码后，我想出了这个非常通用的解决方案：
<script type='text/javascript' src='jquery-1.5.1.min.js'></script>
<script type='text/javascript'>
function countDown(eventID) {
var $this, h, m, s;
$this = $('#event'+eventID);
s = parseInt($this.text().substr(6),10);
m = parseInt($this.text().substr(3,5),10);
h = parseInt($this.text().substr(0,2),10);
s--;
m = (s < 0) ? --m : m;
h = (m < 0) ? --h : h;
if (h < 0) {
$this.css('display','none');
$this.parent().slideUp('slow');
$this.parent().remove();
}
s = (s < 0) ? 59 : s;
m = (m < 0) ? 59 : m;
$this.text(((h < 10) ? '0'+h : h)+':'+((m < 10) ? '0'+m : m)+':'+((s < 10) ? '0'+s : s));
setTimeout('countDown('+eventID+')',1000);
$('.counter').first().show();
}
$(document).ready( function() {
var eventID = 0;
$('#nextEvents div').each( function () {
var nextEventH = parseInt($(this).text().substring(0,2),10);
var nextEventM = parseInt($(this).text().substring(3,5),10);
var nextEventS = $(this).text().substring(5,7);
nextEventH = (nextEventS === 'PM') ? nextEventH + 12 : nextEventH;
nextEventS = 0;
var curTime = new Date();
//curTime = curTime.getHours()+':'+curTime.getMinutes()+':'+curTime.getSeconds();
nextEventH = Math.abs(nextEventH - curTime.getHours());
nextEventH = (nextEventH < 10) ? '0'+nextEventH : nextEventH;
nextEventM = Math.abs(nextEventM - curTime.getMinutes());
nextEventM = (nextEventM < 10) ? '0'+nextEventM : nextEventM;
nextEventS = Math.abs(nextEventS - curTime.getSeconds());
nextEventS = (nextEventS < 10) ? '0'+nextEventS : nextEventS;
$(this).append("<div class='counter' id='event"+eventID+"' style='display:none; "+
"position:absolute; top:0; right:0; width:auto; height:auto; color:red; ' >"+
nextEventH + ':' + nextEventM + ':' + nextEventS+"</div>");
countDown(eventID);
eventID++;
});
});
</script>
</head>
<body>
<div id='wrapper' style='position:relative; width:600px; height:400px; background-color:#366; color:#EEE; ' >
<div id='nextEvents' >
<div style='position:relative; width:100%; display:block; ' >05:12AM - Meeting with department heads</div>
<div style='position:relative; width:100%; display:block; ' >05:13AM - Meeting with Department of Finances</div>
<div style='position:relative; width:100%; display;block; ' >05:14AM - Meeting with Human Resources</div>
</div>
</div>Stack Overflow用户
发布于 2011-11-18 09:30:48
Countdown插件有一个名为onExpiry的参数，它是一个回调函数，在每次Countdown达到零时执行。在此函数中，您可以(a)计算下一次会议日期，以及(b)将倒计时实例的"until“字段更改为该值。
下面是一个例子：
HTML
<html>
<body>
<div id="countdown"></div>
</body>
</html>JavaScript
$('#countdown').countdown(
{
until: getNextMeeting(),
onExpiry:
function()
{
$(this).countdown("change", "until", getNextMeeting());
}
}
);
function getNextMeeting()
{
// Based on the current time, figure out the next meeting time here:
now = new Date();
return now;
}我在jsfiddle中设置了一个示例，它每5秒重置一次时间。当然，您需要调整它来计算实际的会议时间：
http://jsfiddle.net/wXYSZ/
希望这能有所帮助！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/8173542
复制相关文章
相似问题
腾讯云开发者
