0 
<?php wpsc_start_category_query(array('category_group'=>get_option('wpsc_default_category'), 'show_thumbnails'=> 1)); ?>

<script>
window.onload = function() {
    countdown('countdown<?php wpsc_print_category_id(); ?>');
}
var interval;

var seconds = 5;
function countdown(element) {
    interval = setInterval(function() {
        var el = document.getElementById(element);
        if(seconds == 0) {
         el.innerHTML = "countdown's over!";                    
         clearInterval(interval);
         return;
        }
        el.innerHTML = seconds + ' seconds remaining';
        seconds--;
    }, 1000);
}
</script>

<div id='countdown<?php wpsc_print_category_id(); ?>'></div>
<?php wpsc_end_category_query(); ?>

私のタスクでは、wp クエリごとにそのようなカウントダウンが表示されます。問題は、最後にクエリされたオブジェクトに対してのみ表示されることです。私の推測では、window.onload が原因だと思いますが、別の方法は考えられません

ヘルプはありますか？

4

1 に答える 1

1

私は WP が何をするのか 100% 理解していないので、これは全くのゴミかもしれません!

私のコードには、現在のコードの代わりに使用する部分であるテンプレートと、ページ<head>に含めるコードの部分であるカウントダウン関数の 2 つの部分があります。

間隔が将来5秒で一定でない場合に備えて、秒を日、時間、分、秒に変換する機能もあります。

カウントダウン関数は、テンプレート コードによって設定されたすべてのカウントダウンを更新します。

それが役に立てば幸い ：）

アップデート

delete私のコードは、サーバー上の何も編集または削除しません。明らかに、私の変数の名前は、あなたにとって家に少し近すぎます:)完成したカウンターをリストに残します (問題ではありませんが、tick()呼び出されたときに反復されるため、効率が低下します)

何が起こっているのかをよりよく理解できるように、私のコードが何をするのかを最後に説明しようとします。

WPSC テンプレート

<?php   wpsc_start_category_query(array('category_group'=>get_option('wpsc_default_category'), 'show_thumbnails'=> 1)); ?>
<script type="text/javascript">
if (!wpsc_categories) { wpsc_categories = {}; }
wpsc_categories['countdown_<?php wpsc_print_category_id(); ?>'] = 5; // this value is the countdown in seconds
</script>
<div id="countdown_<?php wpsc_print_category_id(); ?>"></div>
<?php wpsc_end_category_query(); ?>

1 週間のカウントダウンが必要で、カウントダウンがページ ビュー全体にわたって持続するようにする場合 (更新時に 1 週​​間にリセットされないようにするため)、カウンターの開始日をサーバーに保存し、当時と現在の差を計算する必要があります ( php で) 5 の代わりにそれを使用します (とにかく、それはあなたが計画していたことだと思います!)

カウントダウン機能 - これはページのヘッダーに含める必要があります

<script type="text/javascript">
var wpsc_categories = [];

// the following function will update all counters using one timer (hopefully)
function tick() {
    var element;
    for (category in wpsc_categories) {
        if (wpsc_categories.hasOwnProperty(category)) {
            element = document.getElementById(category);
            if (wpsc_categories[category] == 0) {
                element.innerHTML = "countdown over!";
                delete wpsc_categories[category];
            } else {
                // MODIFIED THIS LINE, SEE NOTE
                //element.innerHTML = formatTime(wpsc_categories[category]--);
                element.innerHTML = formatTime(wpsc_categories[category]);
                wpsc_categories[category] -= 1;
            }
        }
    }
    //return setInterval(tick, 1000); //this line is bad :D
}

var interval = setInterval(tick, 1000) // start it running

// return formatted time from seconds (if required)
function formatTime(seconds) {
    var numdays = Math.floor(seconds / 86400);
    var numhours = Math.floor((seconds % 86400) / 3600);
    var numminutes = Math.floor(((seconds % 86400) % 3600) / 60);
    var numseconds = ((seconds % 86400) % 3600) % 60;
    return (numdays>0?numdays+" days ":"")+(numhours>0?numhours+" hours ":"")+(numminutes>0?numminutes+" minutes ":"")+(numseconds>0?numseconds+" seconds":"")
}
</script>

ノート

もう少しわかりやすくするために、残り時間の更新方法を変更しました。--少し面倒な減分演算子を使用しました。

説明

元のテンプレートは、カウントダウン コードとそれを呼び出す呼び出しを含む、すべてのカテゴリの大きなコード ブロックをコピーしました。これが、最後のカテゴリ タイマーだけが機能していた理由です。window.onload後続の各カテゴリによって上書きされていました。

はい、無名関数を使用して関数のローリングを開始できたはずですが、それはおそらく最善の解決策ではありません。

今私のコードのために

wpsc_categoriesif (!wpsc_categories) { wpsc_categories = {}; }は、カウンターに関する情報を格納するオブジェクトです。これは、オブジェクトが存在するかどうかを確認し、存在しない場合は作成して、次の like がカウンターに関する情報を追加できるようにします。

ブラウザーでは、クライアントは 3 つのサンプル グループに対して次のように表示されます。

<script type="text/javascript">
if (!wpsc_categories) { wpsc_categories = {}; }
wpsc_categories['countdown_example1'] = 5;
</script>
<div id="countdown_example1"></div>
<script type="text/javascript">
if (!wpsc_categories) { wpsc_categories = {}; }
wpsc_categories['countdown_example2'] = 5;
</script>
<div id="countdown_example2"></div>
<script type="text/javascript">
if (!wpsc_categories) { wpsc_categories = {}; }
wpsc_categories['countdown_example3'] = 5;
</script>
<div id="countdown_example3"></div>

このブロックのコードが JavaScript によって実行されるとすぐに、wpsc_categories 変数に 3 つの必要なカウンターに関する情報が入力されます。この情報はtick()、タイマーの更新に使用されるものです。

更新 2setInterval関数内で 使用されている私の例tick()は悪かったです! setInterval は繰り返しタイマーであるため、 tick を呼び出すたびに新しいタイマーが作成されるため、時間が指数関数的に変化します:D

setTimeout()ワンショット、setInterval()あなたがそれを止めるまで続けます！

于 2013-02-19T02:46:13.590 に答える