Javascript新年除夕時鐘和倒計時

-2

我一直在使用flipclockjs.com JQuery庫試圖創建一個簡單的腳本，我們可以在除夕當地的酒吧中使用它來幫助每個人在新年看到。Javascript新年除夕時鐘和倒計時

基本的想法是在晚上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的設計，但如果這個應用程序不是它的勝利，那麼它就不適合它。

來源

2013-12-10 PeteSE4

顯示你的代碼。不要讓人們去一些隨機的網站看到它。更好的是，把它放在[小提琴]（http://jsfiddle.net/）中，並在這裏發佈你有問題的部分。 –

我已經創建了一個[小提琴版本的腳本]（http://jsfiddle.net/3LdnC/），但我不太瞭解Stackoverflow格式將所有代碼內聯。 – PeteSE4

不知道flipclock，但我可以破解四周，得到它的工作：

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-10 19:05:10 Dave

聰明，非常感謝。有關如何解決24:00:00問題的任何想法？ – PeteSE4

我玩了一下，發現如果你把時間設置爲1而不是0，你不會看到99，但你會看到24:00:00和00:00:01。 – Dave

Javascript新年除夕時鐘和倒計時

回答

相關問題