這個腳本作為股票倒數計時效果很好，但我無法在同一頁上超過 1 個位置顯示它。
例如，同一頁面上有 4 或 5 個產品/計劃，每個產品顯示的庫存數量不同，數量變化的時間也不同。僅在 1 個產品上顯示。
<span class="qty" id="qty"></span>
<script>
const setQty = (qty) => {
qtySpan.innerHTML = qty;
if (qty == 0) return;
let parts = Math.floor((Math.random() * 3) + 1);
if (parts > qty) parts = qty;
const msec = Math.floor(((Math.random() * 15) + 15) * 1000);
qty -= parts;
// Save the updated quantity in localStorage
localStorage.setItem('saved_countdown', qty);
setTimeout(() => setQty(qty), msec);
}
// Get the saved countdown value from localStorage, or use default value of 57 if not found
const defaultQty = localStorage.getItem('saved_countdown') ?? 57;
const qtySpan = document.getElementById('qty');
// Set the initial value of the quantity
setQty(defaultQty);
</script>
我複製了腳本 4x，將 ID“qty”更改為 qty1、qty2、qty3 和 qty4，但它不起作用，它只在 1 個產品中顯示...:/
這裡有人可以幫我嗎？謝謝！
我更改了功能，以便您可以有多個倒數計時。
const setQty = (qtySpan, qty) => { qtySpan.innerHTML = qty; if (qty == 0) return; let parts = Math.floor((Math.random() * 3) + 1); if (parts > qty) parts = qty; const msec = Math.floor(((Math.random() * 15) + 15) * 1000); qty -= parts; // Save the updated quantity in localStorage localStorage.setItem('saved_countdown', qty); setTimeout(() => setQty(qty), msec); } const defaultQty = localStorage.getItem('saved_countdown') ?? 57; let listOfQty = document.querySelectorAll('.qty'); listOfQty.forEach((qty) =>{ setQty(qty, defaultQty); })您只需發送每個倒數計時的具體數字作為第二個參數。
我已將您的腳本修改為自訂元素。這表示您現在可以建立一個名為
<stock-counter>的元素。該元素有 2 個屬性，
quantity和storage-key。quantity是開始計數的金額。storage-key是本機儲存金鑰的名稱，用於儲存此特定計數器的最後數量。如果設定了儲存鍵並且找到了儲存值，則該值將取代quanitity值，除非儲存值是0。所以元素看起來像這樣：
您可以在頁面上放置任意數量的這些元素，並修改每個元素的
quantity和storage-key。customElements.define('stock-counter', class extends HTMLElement { get quantity() { // Check if value has been stored. if (this.storageKey !== null) { const value = Number(localStorage.getItem(this.storageKey)); // Use that value if it is a valid number and not 0. if (!Number.isNaN(value) && value !== 0) { return value; } } // Otherwise get the value from the quantity attribute. const value = Number(this.getAttribute('quantity')); if (Number.isNaN(value)) { return 0; } return value; } set quantity(value) { if (!isNaN(value)) { // Store the new value if it's possible. if (this.storageKey !== null) { localStorage.setItem(this.storageKey, value); } // Set the new attribute value. this.setAttribute('quantity', value); } } get storageKey() { return this.getAttribute('storage-key'); } connectedCallback() { this.count(); } count = () => { const qty = this.quantity; this.textContent = qty; if (qty === 0) { return; } let parts = Math.floor((Math.random() * 3) + 1); if (parts > qty) { parts = qty; } this.quantity -= parts; const msec = Math.floor(((Math.random() * 15) + 15) * 1000); setTimeout(this.count, msec); }; });