1

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

3 に答える 3

1

countDown の問題は、毎回同じ日付を使用して再起動することだと思います。そのため、countDown 初期化関数を再帰的に呼び出すと、古い値を使用してそれ自体を初期化し、すぐに再帰関数を呼び出します。その値は古いものと同じになるためです。 (格納) 1 つ。だから私は別の解決策を見つけ、ここにコードがあります:

   <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

適切な使用法を説明するために編集:

これを行うだけです-あなたは非常に近かったです：

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/

もう1つタインを編集します（@あなたのページを見てください）：

これを逐語的にコピーすると、軽度の再構築で書いたとおりに機能します。Apache HTTPD 2.x 安定版、PHP5.4.x 安定版のローカル インストールを介してこれを確認したことに注意してください。これは、そこからの文字通りのコピー ペーストです。

いくつかの追加メモ：「ベストプラクティス」（私がそのフレーズを嫌う方法）は、html + css を独立させる必要があり、JS がそれを補完する必要があるということです。そうは言っても、htmlが確立された後、jsおよびjs参照は可能な限り発生する必要があります。これは、レガシー システムやレンダー チェーン プロセスに依存するよりもはるかに簡単に思えます。幸運と幸せな狩猟 

 <!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 に答える