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

我不是 100% 理解 WP 的东西是做什么的，所以这可能完全是垃圾！

我的代码有 2 部分，一部分用于代替您当前的代码，模板，以及一部分代码在您的页面<head>中，倒计时功能。

还有一个功能可以将秒转换为天、小时、分钟和秒，如果你的间隔在未来不是恒定在 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被每个后续类别覆盖。

是的，您可以使用匿名函数来启动函数滚动，它应该可以工作，但它可能不是最好的解决方案。

现在我的代码

您对if (!wpsc_categories) { wpsc_categories = {}; }wpsc_categories 是一个存储有关计数器信息的对象有疑问。这会检查对象是否存在，如果不存在则创建它，以便下一个喜欢可以添加有关计数器的信息。

在浏览器中，您的客户端将获得以下 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()用于更新计时器。

更新 2 我setInterval在函数内部使用的示例tick()，这很糟糕！因为 setInterval 是一个重复的计时器，所以每次调用 tick 都会创建一个新的计时器，所以它会以指数方式改变时间：D

setTimeout()是一击，setInterval()一直到你停下来！

于 2013-02-19T02:46:13.590 回答