多個事件

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

回答

相關問題