Question

倒计时我想要的是它每天14:00重新开始。当计数器到达14:00时，它应自动重启并转到23h：59m：59s

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

我看过这个post，但我没有帮助我重启

以下是我使用的代码：

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

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

Answer 2

编辑说明正确使用：

只需这样做 - 你非常接近：

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

你正在做的是将你的函数的“结果”传递给回调，而不是实际的函数本身

这是我为你制作的JSfiddle：

http://jsfiddle.net/U6tgV/

再编辑一个泰恩（查看@您的页面）：

如果您逐字复制，则可以按照您轻轻重组的方式进行。请注意，我通过Apache HTTPD 2.x stable，PHP5.4.x stable的本地安装验证了这一点，这是一个文字复制粘贴。

再加上一些注释：“最佳实践”（我不喜欢这句话）是你的html + css应该是独立的，JS应该赞美它。话虽如此 - js和js refs应该在html建立之后尽可能多地发生。这听起来比依赖遗留系统和渲染链流程要容易得多。祝你好运，快乐狩猎

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

Answer 3

我遇到了类似的问题，这就是我要解决的问题。您尝试在到期事件时重新初始化插件，您需要更新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     
}

Here is a demo，计时器为10秒，用于测试

jquery倒计时重启倒计时没有按任何按钮

3 个答案: