在同一页面上的多个位置显示库存计数器
P粉038161873
P粉038161873 2024-04-02 14:25:38
0
2
2537

这个脚本作为股票倒计时效果很好,但我无法在同一页面上超过 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 个产品中显示...:/

这里有人可以帮助我吗?谢谢!

P粉038161873
P粉038161873

全部回复(2)
P粉536532781

我更改了功能,以便您可以有多个倒计时。

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);

})

您只需发送每个倒计时的具体数字作为第二个参数。

P粉761718546

我已将您的脚本修改为自定义元素。这意味着您现在可以创建一个名为 <stock-counter> 的元素。

该元素有 2 个属性,quantitystorage-key

  1. quantity 是开始计数的金额。
  2. storage-key 是本地存储密钥的名称,用于存储特定计数器的最后数量。如果设置了存储键并且找到了存储值,则该值将取代 quanitity 值,除非存储值是 0

所以元素看起来像这样:

40

您可以在页面上放置任意数量的这些元素,并修改每个元素的 quantitystorage-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
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!