1

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>
4

3 回答 3

1

我认为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>
于 2012-09-24T14:54:26.910 回答
0

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

于 2012-05-18T21:36:16.440 回答
0

我有类似的问题，这是我为解决它所做的。您正在尝试在到期事件时重新初始化插件，您需要更新until属性。因此，在您的声明中使用不同的回调

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

接着

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     
}

这是一个带有 10 秒计时器的演示，用于测试

于 2012-05-26T19:53:14.187 回答