Question

所以我一直在尝试各种解决方案而且一整天都没有运气，因为我在JS中并不强大:(

这是主脚本，我能够运行它

<script>
var cdown;
function startCount()
{
    cdown = setInterval(count, 1000);
}
function count()
{
    var do_wait = Math.ceil(4*Math.random()); 
    if (do_wait == 4) { 
        var rand_no = Math.ceil(3*Math.random()); 
        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"; 
        }
    }
}
</script>

在身体我称之为

<body onLoad="startCount();">

一切正常，在页面中我有显示代码

<span id="counter">181</span>

所以当我加载我的身体时，计数器开始倒计时，但是当我尝试添加另一个计数器时，比如

<span id="counter">181</span></span>
<span id="counter">281</span></span>

然后只有第一个会倒计时，我尝试为cdown等创建一个新函数，但我无法让它们都运行：/

Answer 1

您需要为每个跨度声明不同的id并在其上调用函数以直接在每个跨度上开始倒计时。希望这会有所帮助。

<span id="counter1">181</span></span>
<span id="counter2">281</span></span>

和

function count()
{
  var do_wait = Math.ceil(4*Math.random()); 
  if (do_wait == 4) { 
    var rand_no = Math.ceil(3*Math.random()); 
    var el1 = document.getElementById('counter1');
    var el2 = document.getElementById('counter2');
    var currentNumber = parseFloat(el.innerHTML);
    var newNumber = currentNumber - rand_no;
    if (newNumber > 0) {
      el1.innerHTML = newNumber;
      el2.innerHTML = newNumber;
    } else {
      el1.innerHTML = "Sold Out";
      el2.innerHTML = "Sold Out"; 
  }
}

Answer 2

要在前一个答案的基础上进行构建，您应该更改count函数以获取要倒计时的元素的ID。例如

function count(elementId)
{
    var do_wait = Math.ceil(4*Math.random()); 
    if (do_wait == 4) { 
        var rand_no = Math.ceil(3*Math.random()); 
        var el = document.getElementById(elementId); // use the function argument here
        var currentNumber = parseFloat(el.innerHTML);
        var newNumber = currentNumber - rand_no;
        if (newNumber > 0) {
            el.innerHTML = newNumber;
        } else {
            el.innerHTML = "Sold Out"; 
        }
    }
}

然后你可以调用这样的函数：

var cdown1,
    cdown2;
function startCount()
{
    cdown1 = setInterval(function() {
        count('counter1'); }, 1000);

    cdown2 = setInterval(function() {
        count('counter2'); }, 1000);
}

你的HTML看起来像这样：

<span id="counter1">181</span>
<span id="counter2">281</span>

Answer 3

更独立的东西？

http://codepen.io/luarmr/pen/oXZxXY

var counter = function(id){
  var element = document.getElementById(id),
      interval = false,
      counter = 0;

  var start = function(){
    if (!interval) {
      interval = setInterval(count, 1000);
    }
  }

  var stop = function(){
    clearInterval(interval);
    interval = false;
  }

  var count = function(){
      counter ++;
      element.innerHTML = counter;
  }


  return {
    start : start,
  };
}
window.onload = function(){
  var myCounter = counter('counter');
  myCounter.start();

  var myCounter2 = counter('counter2');
  myCounter2.start();
}

您可以添加关于ramdom的逻辑。

问题在于您只能使用唯一ID，并且您在全局范围内共享变量。

多页定时器在一页上

3 个答案: