javascript - Javascript 大晦日の時計とカウントダウン

Question

私は、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」が表示され、その後正しくカウントダウンされます。理由がわからないようです。また、時計自体は単なるカウンターなので、午前0時になると00:00:00ではなく24:00:00を示します。また、時桁の「99」が短く点滅します。これもまた、ライブラリで行うにはファンキーなものになる可能性があります。

このコードのクリーンアップを手伝ってくれる FlipClock の専門家はいますか? あるいは、Javascript カウンターとクロック用のより優れたライブラリがありますか? 私は FlipClock のデザインが大好きですが、このアプリケーションが気に入らなければ、それに固執することはできません。