jQuery的倒数重新启动倒数，无需按任何按钮 [英] jquery countdown restart countdown without push any button

问题描述

我使用此 jquery倒计时

我想要倒计时的是它每天在14:00重新开始.当计数器达到14:00时，它将自动重新启动并进入23h:59m:59s

现在，它开始倒计时，当到达我的时间时，它停留在00:00:00.如果我手动刷新页面，则倒数计时将再次开始.

我已经看过发布，但是我在重启时不会帮上忙

这是我使用的代码:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1      /jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.countdown.js"></script>
<script type="text/javascript">
function doCountdown() {
    var todaysNoon = new Date(),
        nextNoon = new Date();
    todaysNoon.setHours(14, 00, 0);
    if (todaysNoon <= nextNoon) {
        nextNoon.setDate(nextNoon.getDate() + 1);
    }
    nextNoon.setHours(14, 00, 0);
    $('#defaultCountdown').countdown({
        until: nextNoon,
        description: '',
        onExpiry: function() {
            doCountdown()
        }
    });
}
$(window).load(function() {
    doCountdown();
});​
</script> 

HTML :

<h1>Text here</h1>
<p>Some text here.</p>
<div id="defaultCountdown"></div>

解决方案

我认为countDown的问题在于它每次使用相同的日期来重新启动自身，因此如果递归调用countDown初始化函数，它将使用旧值初始化自身并立即调用递归函数，因为该值将与旧的(存储的)值相同. 所以我找到了一个不同的解决方案，下面是代码:

   <script type="text/javascript">
    $(function () {
        startCountDown();
    });

    function startCountDown() {
        var austDay = new Date();
        //        austDay.setMinutes(austDay.getMinutes() + 1);
        austDay.setSeconds(austDay.getSeconds() + 5);
        $('#myDiv').children().remove();
        $('#myDiv').append('<div id="defaultCountdown" />');

        $('#myDiv').find('#defaultCountdown').countdown({
            format: 'MS',
            until: austDay,
            onExpiry: function () {
                $('#defaultCountdown').countdown('destroy');
                austDay.setMinutes(austDay.getMinutes() + 1);
                startCountDown();
            },
            compact: true,
            layout: '<b>{mnn}{sep}{snn}</b>'
        });
    }
</script>
<div id="myDiv">
    <div id="defaultCountdown">
    </div>
</div>

I use this jquery countdown

What i want with the countdown is that it restart every day at 14:00. When the counter reach 14:00 o'clock it should restart automatically and go to 23h:59m:59s

Right now it count down and when it reach my time it sticks at 00:00:00. If i manually refresh the page the countdown starts again.

I have watch this post but i wo't help me with the restart

Here is the code I use:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1      /jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.countdown.js"></script>
<script type="text/javascript">
function doCountdown() {
    var todaysNoon = new Date(),
        nextNoon = new Date();
    todaysNoon.setHours(14, 00, 0);
    if (todaysNoon <= nextNoon) {
        nextNoon.setDate(nextNoon.getDate() + 1);
    }
    nextNoon.setHours(14, 00, 0);
    $('#defaultCountdown').countdown({
        until: nextNoon,
        description: '',
        onExpiry: function() {
            doCountdown()
        }
    });
}
$(window).load(function() {
    doCountdown();
});​
</script> 

HTML:

<h1>Text here</h1>
<p>Some text here.</p>
<div id="defaultCountdown"></div>

解决方案

I think the problem with countDown is that it each time use the same date to restart itself,so if you call countDown initialization function recursively it will use the old value to initialize itself and immediately call recursive function,because that value will the same as old(stored) one. So I find a different solution and here's the code:

   <script type="text/javascript">
    $(function () {
        startCountDown();
    });

    function startCountDown() {
        var austDay = new Date();
        //        austDay.setMinutes(austDay.getMinutes() + 1);
        austDay.setSeconds(austDay.getSeconds() + 5);
        $('#myDiv').children().remove();
        $('#myDiv').append('<div id="defaultCountdown" />');

        $('#myDiv').find('#defaultCountdown').countdown({
            format: 'MS',
            until: austDay,
            onExpiry: function () {
                $('#defaultCountdown').countdown('destroy');
                austDay.setMinutes(austDay.getMinutes() + 1);
                startCountDown();
            },
            compact: true,
            layout: '<b>{mnn}{sep}{snn}</b>'
        });
    }
</script>
<div id="myDiv">
    <div id="defaultCountdown">
    </div>
</div>

这篇关于jQuery的倒数重新启动倒数，无需按任何按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！