Jquery countdown On Expiry

问题:

I need some help. I am putting a jquery countdown timer on a page. the countdown I am using is http://keith-wood.name/countdown.html what I need is when one countdown expires, it will then count down to another date. So for example it will countdown to 1/08/2015. When it reaches 1/08/2015 I then want it to count down to another date. So from 1/08/2015 it will then count down to 5/08/2015. I hope that makes sense. I have successfully put the countdown itself on the page. it is just the On expiry I am having trouble with.

This is the script from the example.

<script>
    $(function () {
        var austDay = new Date();
        austDay = new Date(2015, 11 - 1, 7);
        $('#defaultCountdown').countdown({until: austDay});
        $('#year').text(austDay.getFullYear());
    });
</script>

It is displayed in this tag

<center><div id="defaultCountdown"></div></center>

I have made an effort towards it. This is as far as I have got but it is also as far as I can go. Any help would be greatly appreciated

$(function () {
    var austDay = new Date();
    FirstDay = new Date(2015, 11 - 1, 7);
    SecondDay = new Date (2015, 11 - 1, 9);
    $('#defaultCountdown').countdown({until: FirstDay});
});

Should of mentioned that there are going to be 4 dates to countdown to in total!

回答1:

You have onExpiry event which you can utilize and below is just a sample how you could do! Not sure if it works or not!! May be you have to trial and error.

set a global variable first to check once count has been done:

var count=0;

$(function () {
    var austDay = new Date();
    austDay = new Date(2015, 11 - 1, 7);
    $('#defaultCountdown').countdown({until: austDay,onExpiry: liftOff});
    $('#year').text(austDay.getFullYear());
});

function liftOff() { 
     if(count==0)
     {
        $('#defaultCountdown').countdown({until: newDate});
        count=1;
     }
     else
        count=0;
}

You can find the options here

---

UPDATE

Ok just copy and paste this below code as it is!!

Its tested

DEMO HERE

var count=0; //a global variable

$(function () {
    shortly = new Date(); 
    shortly.setSeconds(shortly.getSeconds() + 5.5); //for time being this will run for 5 seconds
    $('#defaultCountdown').countdown({until: shortly,onExpiry: liftOff}); 
});

function liftOff() { 
//function that gets called on expiry
   if(count==0) //check already done 2nd time, if not get in
   {
        shortly = new Date(); 
        shortly.setSeconds(shortly.getSeconds() + 5.5); //again do it for 5 secs
        $('#defaultCountdown').countdown('option',{until: shortly});
        //set an option here for the same counter again
        count=1; //make this 1
   }
   else
       count=0;
}

The above code is present at the end of javascript section in the above demo given

回答2:

What about comparing the date with the current date?

var today = new Date();
if(today<FirstDay){
    $('#defaultCountdown').countdown({until: FirstDay});
}
else if(today<=SecondDay){
    $('#defaultCountdown').countdown({until: SecondDay});
}

I don't want to enforce my logic here, the concept would be comparing the date with the current one. However, this approach won't work perfectly unless the client machine is set to the right time and have the same time zone, or it will have different output to each client. I prefer to do the comparison on the server side. Edit I changed it so that the second counter starts just after the first one