<?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查询显示这样的倒计时。问题是它只显示最后一个查询对象。我猜那是因为窗户打开了，但我想不出其他
有什么帮助吗？
我不100%理解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周的倒计时，并且倒计时在页面视图中持续存在(这样当你刷新时它不会重置为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我的示例在tick()函数中使用了setInterval，这很糟糕！由于setInterval是一个重复计时器，因此每次调用tick都会创建一个新的计时器，因此它会以指数形式更改时间：D
setTimeout()是一枪，setInterval()一直走到你停下来！