Skrip ini berfungsi hebat sebagai kira detik stok, tetapi saya tidak boleh memaparkannya di lebih daripada 1 tempat pada halaman yang sama.
Sebagai contoh, terdapat 4 atau 5 produk/pelan pada halaman yang sama, setiap produk memaparkan kuantiti stok yang berbeza, dan kuantiti berubah pada masa yang berbeza. Ditunjukkan pada 1 produk sahaja.
<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>
Saya menyalin skrip 4x dan menukar ID "qty" kepada qty1, qty2, qty3 dan qty4 tetapi ia tidak berfungsi, ia hanya muncul dalam 1 produk... :/
Bolehkah sesiapa di sini membantu saya? Terima kasih!
Saya menukar fungsi supaya anda boleh mempunyai berbilang detik.
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); })
Anda hanya menghantar nombor tertentu untuk setiap kira detik sebagai parameter kedua.
Saya telah mengubah suai skrip anda kepada elemen tersuai. Ini bermakna anda kini boleh mencipta elemen yang dipanggil <stock-counter>
.
Elemen ini mempunyai 2 sifat, quantity
和 storage-key
.
quantity
ialah jumlah untuk mula mengira. storage-key
是本地存儲密鑰的名稱,用于存儲此特定計數(shù)器的最后數(shù)量。如果設(shè)置了存儲鍵并且找到了存儲值,則該值將取代 quanitity
值,除非存儲值是 0
. Jadi elemennya kelihatan seperti ini:
40
Anda boleh meletakkan sebarang nombor elemen ini pada halaman dan mengubah suai setiap elemen 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); }; });
40 50 80