多个事件

jQuery的倒数计时器这里是我的问题。我正在编写一个会议大厅的网站。客户希望倒计时到主页上的下一次会议。我想我会使用http://keith-wood.name/countdown.html上的Jquery Countdown插件，因为它拥有我需要的一切。但是因为会议厅每天都有多个会议，所以我需要它在倒数到下次会议倒计时。我知道每天所有会议的日期和时间，但我不知道如何能够在下届会议上过期。有什么想法吗？多个事件

来源

2011-11-17 Devender

什么格式是日期和时间吗？你如何访问它们？ –

这不是一个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>

来源

2011-11-18 07:25:14

这是一个好用且易于使用的代码。感谢您的时间！我怎样才能做到这一点，以便我可以添加几天？他们的会议已经确定，所以变化不大。他们几乎每周都会开会。像周一下午5:00始终是一个会议，但周二5:00可能是另一个 – Devender

如果你能，继续投我的回答并接受它作为你选择的答案。我会重新编码它包括你提到的日子。 –

倒计时插件有一个叫做onExpiry参数，这是一个回调函数，执行每次倒数到零的时间。在这个函数中，你可以（a）计算下一个会议日期，并且（b）将倒计时实例的“直到”字段改变为该值。

下面是一个例子：

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/

希望这有助于！

来源

2011-11-18 01:30:47

非常感谢。 +1，非常有帮助。 – Devender

回答

相关问题