Jquery 多个事件的倒计时器-6ren

Jquery 多个事件的倒计时器

转载作者：行者123 更新时间：2023-12-01 06:29:45

27

4

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

最佳答案

这不是像 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 多个事件的倒计时器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8173542/

27

4

0

文章推荐： java - 处理复杂数据结构的正确方法是什么？

文章推荐： AngularJS ngResource 不发送自定义 header

文章推荐： java - 打印子字符串

文章推荐： python - 动态计算一年中每周前 3 周的值

android - 如何在黑色条码android上扫描白色(倒 jar )？
我想在 android 中扫描黑底白字条码。我使用过 zxing，它允许我只扫描白底黑字。我如何扫描和倒置条形码或使用哪个库？感谢您的帮助。最佳答案如果您仍在引用 journeyapps 嵌入式
c++ - 倒 X 轴 OpenGL
所以我在 youtube 上观看了一些介绍性类(class)以学习 OpenGL 的基础知识并学习了诸如制作三角形和简单相机类等内容。我一直想尝试制作体素引擎，这显然是第一个我想做的是一个我最终可以复
html - 倒 Angular 边框不同容器颜色 CSS
这个问题在这里已经有了答案: Div with cut out edges, border and transparent background (6 个答案) 关闭 8 年前。
html - 倒 Angular/圆 Angular 图像 HTML
我有一张图片，我正在查看用 HTML 创建的小型网站的基本定制。我知道您可以对图像进行倒 Angular 处理，如 this question here 中所示，这给出了 45 度切割。我希望每个
iphone - iOS 中的自定义形状(倒 T)边框 Uiview
我必须在 iOS 上创建一个自定义形状(倒 T)边框的 Uiview。我附上下面的截图。我进行了很多研究，找到了一种使用 here 中的 UIBezierPath 的方法. 但我不知道如何将我的 Vi

首页

博学

6Ren·AI

商城

Jquery 多个事件的倒计时器