Flipclock js倒计时1小时不复位 [英] Flipclock js countdown 1hour without reset

问题描述

我正在尝试倒计时而不重置刷新时间。我只需要倒计时1h，但我不希望它在刷新时重置。从服务器获取当前时间和到期时间不起作用，因为我想在点击时重置该计时器。这是我目前的js代码：

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>

推荐答案

是的，你可以在你的例子中使用 flipclock 和 jquery-cookie 看看 1分钟倒计时示例 。

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

在 init（） <$ c $的功能c> flipclock 将结束日期存储在cookie中，init计时器使用 clock.setTime（），使用时钟启用倒计时。 setCountdown（true）并以 clock.start（）开始。

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().

现在如果用户刷新页面，我们设置Timer与当前日期和结束日期之间的差异，所以像这个计数器可以正常继续倒计时：

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);

点击重置按钮将重置柜台删除cookie endDate 并初始化倒计时功能。

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();
});

在你的情况下（1小时）你只需要在这一行中替换1乘60：

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

这篇关于Flipclock js倒计时1小时不复位的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！