Question

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

Answer 1

Countdown插件有一个名为onExpiry的参数，它是一个回调函数，每当Countdown达到零时执行。在此功能中，您可以（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/

希望这有帮助！

Answer 2

这不是像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>

Jquery倒计时器用于多个事件

2 个答案: