Question

<?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，但我认为没有其他选择

任何帮助？

Answer 1

我不是百分之百了解WP的东西，所以这可能只是完全垃圾！

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

还有一项功能可以将秒数转换为天，小时，分钟和秒，如果您的间隔在未来5秒内不会保持不变。

倒计时功能将更新模板代码设置的所有倒计时。

希望有所帮助:)

<强>更新

我的代码不会编辑或删除服务器上的任何内容，显然将我的变量命名为离家太近了:)正如我的评论所说，delete调用只会从列表保存信息中删除计数器关于计数器，删除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周），您需要在服务器上存储计数器开始日期，计算之间的差异现在（使用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()一直持续到你停止它为止！

多个JavaScript倒计时

1 个答案: