How to get a countdown timer that starts on a specific date/time and counts down every hour

问题

I'm trying to achieve a countdown timer that would use a specific date and time for it to start. From there I need it to countdown from 1 hour and then update the initial date and time by adding an hour and then repeat itself indefinitely.

This is used for a product auction that would get a new product once one sells out and the price drops every hour from when it is added to the auction which could be any time of day.

Example:

I need this timer to start on 2014, 7, 25, 11, 30, 0, 0 (August 25th, 2014 at 11:30 AM EST) It would countdown 1 hour and upon completion it would add on an hour to the start date making 2014, 7, 25, 12, 30, 0, 0 This would repeat itself indefinitely until I choose to stop it.

It would also not change based on if the site visitor refreshed the page, meaning they visit the page and see 33 minutes left, not keep resetting it to 1 hour for each refresh.

I was going to use this countdown timer: http://keith-wood.name/countdown.html

What I needed was the time that I give it in variable form. I tried to research this as much as possible without any luck, most are not specific enough or only deal with the date and not the time.

I'm not that well versed in Javascript and jQuery; here is what I had so far.

Pardon my code, there are many ideas at work here:

$(document).ready(function() {
    var everyhour = new Date(); 
    //everyhour = new Date(everyhour.getFullYear() + 1, 1 - 1, 1);
    everyhour = 2014, 8-1, 25, 9, 30, 0, 0;
    // the above was my initial try and it wasn't getting me anywhere
    var date  = new Date(2014, 7, 25, 12, 0, 0);
    var now   = new Date();
    var diff  = date.getTime()/1000 - now.getTime()/1000;
    alert (diff);
    // The above was another stab at it, got me a little closer
    var minutesToAdd = 60;
    date.setMinutes(date.getMinutes()+minutesToAdd);
    // the above was something I found on this website and got brain block
   // the below was me trying to start a loop and get the date to update by adding an hour onto it
   //  for i 
   //  if diff = 3600 {
   //    var dated = dated + 1
   //  }
       $('#auctioncountdown').countdown({until: diff, format: 'HMS'});
});

Any help would be greatly appreciated.

回答1:

You can use setInterval to continuously update the countdown:

   setInterval(function(){
      // update countdown
   }, 1000 * 60); // for every hour

setInterval will cause the function you pass in to run continuously every hour (in this case).

回答2:

I ended up going with something simpler and ultimately achieving what I was originally asking, using 'now' instead of a specific date. Having a timer reset itself every hour and refreshing the page to changed content. In my case I'm actually adding a couple of minutes to the time because of a background app taking a minute or two to do it's communication on updating the server with new information. It's basically to get rid of the lag time and make a better user experience for the page visitor.

Here is my code:

  $(document).ready(function() {        
    function ShowTime() {
        var now = new Date();
        var diff = -2;
        var nowTwo = new Date(now.getTime() + diff*60000);  
        var mins = 59-nowTwo.getMinutes();
        var secs = 59-nowTwo.getSeconds();
        timeLeft = "" +mins+'m '+secs+'s';
        $("#auctioncountdown").html(timeLeft);
        if ($("#auctioncountdown").html() === "0m 1s") {
          location.reload(true)
        };
    };
    function StopTime() {
        clearInterval(countdown);   
    }
    ShowTime();
    var countdown = setInterval(ShowTime ,1000);
  });

来源：https://stackoverflow.com/questions/25494385/how-to-get-a-countdown-timer-that-starts-on-a-specific-date-time-and-counts-down

标签

javascript

jquery

date

time

countdown