Flipclock js countdown 1hour without reset

问题

I'm trying to make a countdown without resetting the time on refresh. I need to countdown 1h only but I don't want it to reset on refresh. Getting the current time from server and expiration time is not working since I want to reset that timer on a click. Here is my current js code:

<script>
    var clock;


    clock = $('.clock').FlipClock({
        clockFace: 'HourlyCounter',
        autoStart: false,
        callbacks: {
            stop: function() {
                $('.message').html('The clock has stopped!')
            },
        }
    });   
    clock.setTime(3600);
    clock.setCountdown(true);
</script>

回答1:

Yes you can do it basing in your example using flipclock and jquery-cookie take a look at 1 minute countdown Example.

In init() function of flipclock storing the End Date in cookies, init timer with clock.setTime(), enable countdown with clock.setCountdown(true) and start it by clock.start().

Now if the user refresh page, we set the Timer with difference between current and end Date, so like this counter can continue the countdown normally :

var counter = $.cookie('endDate')-currentDate;
clock.setTime(counter);

Clicking in reset button will reset the counter by removing the cookie endDate and initializing countdown function.

HTML :

<div class="clock" style="margin:2em;"></div>
<div class="message"></div>
<button id='reset'>Reset</button>

Js :

//ready function
$(function(){

    countDown = function(){
        var currentDate = Math.round(new Date() / 1000);

        var clock = $('.clock').FlipClock({
            countdown: true,
            callbacks: {
                init: function() {
                    //store end date If it's not yet in cookies
                    if(!$.cookie('endDate')){
                        // end date = current date + 1 minutes
                        var endDate = Date.now() + 1*60*1000; 

                        // store end date in cookies
                        $.cookie('endDate', Math.round(endDate / 1000)); 
                    }
                },
                stop: function() {
                    $('.message').html('The clock has stopped!');
                },
            }
        });

        /* counter will be at first 1 min if the user refresh the page the counter will 
           be the difference between current and end Date, so like this counter can 
           continue the countdown normally in case of refresh. */
        var counter = $.cookie('endDate')-currentDate;

        clock.setTime(counter);
        clock.setCountdown(true);

        clock.start();
    }

    //reset button
    $('#reset').click(function(){
        $.removeCookie('endDate'); //removing end date from cookies
        countDown(); //launch countdown function
    });

    //Lanching count down on ready
    countDown();
});

In your case (1 hour) you have just to replace the 1 by 60 in this line :

var endDate = Date.now() + 1*60*1000; // For you .... + 60*60*1000

来源：https://stackoverflow.com/questions/31670979/flipclock-js-countdown-1hour-without-reset

标签

javascript

jquery

countdown

flipclock