Question

我使用此倒计时脚本http://keith-wood.name/countdown.html

我的代码是：

<script type="text/javascript">
    $(function() {
        $('#defaultCountdown').countdown({ until: +43200 });
        $('#removeCountdown').toggle(function() {
                $(this).text('Re-attach');
                $('#defaultCountdown').countdown('destroy');
            },
            function() {
                $(this).text('Remove');
                $('#defaultCountdown').countdown({ until: +43200 });
            });
    });
</script>

现在，这可以减少到12小时，但问题是，每次刷新页面时，计数器都会反复开始，所以基本上12小时将永远不会结束。

我希望自动启动，但在12小时后完成。

请帮忙吗？

Answer 1

每次页面刷新到倒计时脚本时，您都不需要传递12小时，而是需要传递现在和所需日期之间的小时差异。

<script type="text/javascript">
    $(function() {
        var date1 = new Date();
        var date2 = new Date("2015-04-21 23:59:59");
        var hours = Math.abs(date1 - date2) / 36e5;
        hours = // convert hour to until format
        $('#defaultCountdown').countdown({ until: hours });
        $('#removeCountdown').toggle(function() {
                $(this).text('Re-attach');
                $('#defaultCountdown').countdown('destroy');
            },
            function() {
                $(this).text('Remove');
                $('#defaultCountdown').countdown({ until: +43200 });
            });
    });
</script>

Answer 2

基本上你需要保存te倒计时，并在每次加载页面时将其取回。

下面的代码应该可以解决问题。调用get12HourPeriod将从当前日期添加12小时并保存到cookie。只要你没有将true传递给它，每个页面重新加载都会从cookie中获取值，倒计时应该正常继续。如果您传递true参数，那么它将删除cookie并且下次运行（或重新附加点击）将节省新的12小时。

<script type="text/javascript">
     function get12HourPeriod(reset) {
        if (reset) { // remove date from cookie
            document.cookie = 'countdownTo=;expires=Thu, 01 Jan 1970 00:00:01 GMT;'; // remove cookie date
            return;
        }

        if (document.cookie.indexOf('countdownTo=') == -1) { // create cookie if not exists
            var today = new Date(); // get current date
            today.setHours(today.getHours() + 12); // add 12 hours to it
            document.cookie = 'countdownTo=' + today.getTime() + ';expires=' + today.toGMTString(); // create cookie in milliseconds
        }

        var cookies = document.cookie; // get all cookies

        cookies = cookies.substr(cookies.indexOf('countdownTo='), cookies.length); // get only the cookie we need it

        if (cookies.indexOf(';') != -1) { // make sure only our cookie is returned
            cookies = cookies.substr(0, cookies.indexOf(';'));
        }

        cookies = cookies.split('=')[1]; // get cookie value

        return new Date(parseInt(cookies, 10)); // parse the milliseconds saved and return the countdown as date
     }

     $(function() {
        $('#defaultCountdown').countdown({ until: get12HourPeriod() });
        $('#removeCountdown').toggle(function() {
                $(this).text('Re-attach');
                $('#defaultCountdown').countdown('destroy');
                get12HourPeriod(true); // passing true here will reset the countdownTo
            },
            function() {
                $(this).text('Remove');
                $('#defaultCountdown').countdown({ until: get12HourPeriod() }); 
            });
    });
</script>

jQuery倒计时停止重置

2 个答案: