Javascript新年前夜时钟&倒数

时间:2013-12-10 18:11:47

标签: javascript jquery flipclock

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

基本的想法是在晚上24小时制,秒钟即将开始。午夜30点到午夜,倒计时出现在时钟下方,在午夜时分,倒计时被'新年快乐'消息取代,时钟继续显示当前时间。

我目前的选秀是here(小提琴)

        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多天才能看到它是如何工作的!

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

任何可以帮助我清理此代码的FlipClock专家,或者只是有一个更好的库用于Javascript计数器和时钟?我喜欢FlipClock的设计,但是如果这个应用程序不是它的话就不会结合它。

1 个答案:

答案 0 :(得分: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);