如何在产品上设置多个倒数计时器?

时间:2019-06-24 12:10:17

标签: javascript html

设置销售页面,但我无法让产品库存倒数计时器在该页面上的其他产品上工作。

我让它适用于第一个产品,但它不想适用于第二个产品。同一页。

// Random Countdown Timer Script, by http://ctrtard.com
var timer;


function startCount() {
  timer = setInterval(count, 200); // 200 = 200ms delay between counter changes. Lower num = faster, Bigger = slower.
}

function count() {
  var rand_no = Math.ceil(9 * Math.random()); // 9 = random decrement amount. Counter will decrease anywhere from 1 - 9.
  var el = document.getElementById('counter');
  var currentNumber = parseFloat(el.innerHTML);
  var newNumber = currentNumber - rand_no;
  if (newNumber > 0) {
    el.innerHTML = newNumber;
  } else {
    el.innerHTML = "Sold Out"; // This message is displayed when the counter reaches zero.
  }
}
<body onLoad="startCount();">

  <span class="timer">Buy it now!!!!!! only <span id="counter">15555</span> left</span>

</body>

我只是以一个计时器或另一个计时器结束,而不是同时退出

1 个答案:

答案 0 :(得分:0)

您需要做的就是为您的计数器提供2个唯一的ID(例如,counter1和counter2),然后像这样更新您的count方法中的ID:

<span class="timer">Buy it now!!!!!! only <span id="counter1">15555</span> left</span>
...
<span class="timer">Buy it now!!!!!! only <span id="counter2">12345</span> left</span>
var timer;
var nbCounters = 2;

function startCount() {
  timer = setInterval(count, 200); // 200 = 200ms delay between counter changes. Lower num = faster, Bigger = slower.
}

function count() {
  // Update all counters
  for(i=1; i<=nbCounters; i++) {
    var rand_no = Math.ceil(9 * Math.random()); // 9 = random decrement amount. Counter will decrease anywhere from 1 - 9.
    var el = document.getElementById('counter' + i);
    var currentNumber = parseFloat(el.innerHTML);
    var newNumber = currentNumber - rand_no;
    if (newNumber > 0) {
      el.innerHTML = newNumber;
    } else {
      el.innerHTML = "Sold Out"; // This message is displayed when the counter reaches zero.
    }
  }
}

我真的建议您看一下jQuery进行DOM操作:https://api.jquery.com/

卢卡斯