多個JavaScript倒計時
[英]Multiple JavaScript countdowns
問題描述
<?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，但是我想不到
有幫助嗎？
1 個解決方案
解決方案1
1 已采納 2013-02-19 02:46:13
我不是100％了解WP的功能，所以這可能完全是垃圾！
我的代碼分為兩部分，一部分用於替換您當前的代碼，模板，另一部分包含在頁面<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 = {}; } 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()一直持續到您停止為止！
一頁多次倒計時
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.