jquery countdown restart countdown without push any button

问题

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>

回答1:

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>

回答2:

Edited to illustrate proper use:

Simply do this - you were very close:

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: doCountdown
    });
}
$(window).load(function() {
    doCountdown();
});

What you were doing was passing "the result" of your function to the callback, not the actual function itself

here's a JSfiddle I made for you :

http://jsfiddle.net/U6tgV/

edit one more tyne (looking @ your page):

If you copy this verbatim it works as you wrote it with mild restructuring. Please note that I verified this via a local installation of Apache HTTPD 2.x stable, PHP5.4.x stable and this is a literal copy paste from that.

Couple additional notes : "best practices" (how i loath that phrase) are that your html + css should be stand alone and JS should compliment it. That being said - js and js refs should occur as much as possible AFTER the html is established. This sounds a lot easier than it can be depending on legacy systems and render-chain processes. Good luck and happy hunting

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>jQuery Countdown</title>
<style type="text/css">
@import "jquery.countdown.css";

#defaultCountdown { width: 240px; height: 45px; }
</style>

</head>
<body>

<div id="defaultCountdown">asdasdads</div>?
</body>
</html>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://keith-wood.name/js/jquery.countdown.js"></script>
<script type="text/javascript">

function doCountdown() {
    var todaysNoon = new Date(),
        nextNoon = new Date();
    todaysNoon.setHours(0, 00, 30);
    if (todaysNoon <= nextNoon) {
        nextNoon.setDate(nextNoon.getDate() + 1);
    }
    nextNoon.setHours(00, 00, 60);
    $('#defaultCountdown').countdown({
        until: nextNoon,
        description: '',
        onExpiry: doCountdown
    });
}
$('#defaultCountdown').on("click", function() {
    doCountdown();
});

回答3:

I had the similar problem, here is what I did to solve it. You are trying to re-initialize the plugin on expiry event, you need to update the until property instead. So, use a different callback in your declaration

$('#defaultCountdown').countdown({
        until: nextNoon,
        description: '',
        onExpiry: doReset
    });

and then

function doReset(){
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('change', 'until', nextNoon);//use change method     
}

Here is a demo with a timer of 10 seconds for testing

来源：https://stackoverflow.com/questions/10659616/jquery-countdown-restart-countdown-without-push-any-button

标签

jquery

restart