-2

我一直在使用flipclockjs.com JQuery 库来尝试创建一个简单的脚本，我们可以在新年前夜在当地的酒吧使用它来帮助每个人在新的一年里看到。

基本的想法是在晚上，带有秒数的 24 小时制时钟正在滴答作响。在距午夜 30 秒时，时钟下方会出现倒计时，在午夜时分，倒计时将被“新年快乐”信息取代，时钟继续显示当前时间。

我目前的草稿在这里（小提琴）

        var clock;
        $(document).ready(function() {              
            $('.countdown').hide();
            $('.nye').hide();

            /*var currentDate = new Date(); - enable this for the live event*/
            var currentDate = new Date(2013,12,31,23,59,20,0);
            var switchToCountdown = getHMS(currentDate)+10;
            var newyears = switchToCountdown+31;

            var clock = $('.clock').FlipClock(getHMS(currentDate), {
                callbacks: {
                        interval: function() {
                            var curTime = clock.time.time;
                            if (curTime == switchToCountdown) {
                                switchCountdown();
                            }
                            if (curTime == newyears) {
                                clock.setTime(0);
                            }
                        }
                }
            }); 
        });

        function switchCountdown() {
            var countdownclock = $('.countdown').FlipClock(30,{
                clockFace: 'Counter',
                callbacks: {
                            stop: function() {
                                    $('.countdown').hide();
                                    $('.nye').show(1000);
                            }
                    }
            });

            setTimeout(function() {
                setInterval(function() {
                    countdownclock.decrement();
                }, 1000);
            });
            $('.countdown').show();
        }


        function getHMS(fulltime) {
            var hours = fulltime.getHours()*60*60;
            var minutes = fulltime.getMinutes()*60;
            var seconds = fulltime.getSeconds();
            return hours + minutes + seconds;
        }

（该示例设置为从 23:59:20 开始，因此您不必等待 20 多天才能看到它是如何工作的！）

它有点工作，但有一些奇怪的地方可能仅仅是由于 FlipClock 库的工作方式。当倒计时第一次出现时，它显示“29”，然后是“30”，然后正确倒计时。似乎无法弄清楚为什么。此外，时钟本身只是一个计数器，所以当它到达午夜时，它会显示 24:00:00 而不是 00:00:00。它还在小时数字中短暂闪烁“99”。这又可能与图书馆有关。

那里有任何 FlipClock 专家可以帮助我清理此代码，或者是否有更好的 Javascript 计数器和时钟库？我喜欢 FlipClock 的设计，但如果这个应用程序不适合它，我就不喜欢它。

4

1 回答 1

1

不知道翻转时钟，但我能够破解并让它工作：

http://jsfiddle.net/3LdnC/1/

我变了：

setTimeout(function() {
    setInterval(function() {
        countdownclock.decrement();
    }, 1000);
});
$('.countdown').show();

至：

countdownclock.decrement();
setTimeout(function() {
    $('.countdown').show();    
    setInterval(function() {
        countdownclock.decrement();
    }, 1000);
},1000);
于 2013-12-10T19:05:10.313 回答