Javascript随机倒计时-如何在同一页面上多次重复同一时间_Javascript_Countdown

Javascript随机倒计时-如何在同一页面上多次重复同一时间

javascript

Javascript随机倒计时-如何在同一页面上多次重复同一时间,javascript,countdown,Javascript,Countdown,我有一个随机倒计时脚本，如下所示：下面是Javascript： <script> var timer; function startCount() { timer = setInterval(count, 1000); // 200 = 200ms delay between counter changes. Lower num = faster, Bigger = slower. } function count() { var do_wait = Mat

我有一个随机倒计时脚本，如下所示：

下面是Javascript：

   <script>

var timer;
function startCount()
{
    timer = setInterval(count, 1000); // 200 = 200ms delay between counter changes. Lower num = faster, Bigger = slower.
}
function count()
{
    var do_wait = Math.ceil(4*Math.random());
    if (do_wait == 4) {
        var rand_no = Math.ceil(4*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 > 3) {
            el.innerHTML = newNumber;
        } else {
            el.innerHTML = '<font color="white">3</font>';  // This message is displayed when the counter reaches zero.
        }
    }
}
startCount();

</script>


无功定时器；
函数startCount（）
{
计时器=设置间隔（计数，1000）；//200=计数器更改之间的200ms延迟。数值越小=越快，数值越大=越慢。
}
函数计数（）
{
var do_wait=Math.ceil（4*Math.random（））；
if（do_wait==4）{
var rand_no=Math.ceil（4*Math.random（））；/9=随机递减量。计数器将在1-9之间的任意位置递减。
var el=document.getElementById（'counter'）；
var currentNumber=parseFloat（el.innerHTML）；
var newNumber=当前编号-随机编号；
如果（新编号>3）{
el.innerHTML=newNumber；
}否则{
el.innerHTML='3'；//计数器为零时显示此消息。
}
}
}
startCount（）；

下面是我如何在HTML中调用它

<span style="color:white;" id="counter">50</span>

我希望能够在页面上以相同的倒计时编号多次显示ID“counter”。问题是每次我显示ID“counter”时，它都有一个不同的倒计时编号。

我会将“ID”改为“name”，这样我的文档中就不会多次显示相同的ID。我对您的代码做了一些更改：

    <html>
<head>
<script>

var timer;
function startCount()
{
    timer = setInterval(count, 1000); // 200 = 200ms delay between counter changes. Lower num = faster, Bigger = slower.
}
function count()
{
    var do_wait = Math.ceil(4*Math.random());
    if (do_wait == 4) {
        var rand_no = Math.ceil(4*Math.random()); // 9 = random decrement amount. Counter will decrease anywhere from 1 - 9.
        var els = document.getElementsByName('counter');
    for(var i = 0 ; i < els.length ; i++) {
          var currentNumber = parseFloat(els[i].innerHTML);
          var newNumber = currentNumber - rand_no;
          if (newNumber > 3) {
            els[i].innerHTML = newNumber;
          } else {
            els[i].innerHTML = '<font color="white">3</font>';  // This message is displayed when the counter reaches zero.
          }
        }
    }
}
startCount();

</script>
</head>
<body>
    <span style="color:white;" name="counter">50</span>

    <span style="color:white;" name="counter">50</span>

    <span style="color:white;" name="counter">50</span>

    <span style="color:white;" name="counter">50</span>
</body>


无功定时器；
函数startCount（）
{
计时器=设置间隔（计数，1000）；//200=计数器更改之间的200ms延迟。数值越小=越快，数值越大=越慢。
}
函数计数（）
{
var do_wait=Math.ceil（4*Math.random（））；
if（do_wait==4）{
var rand_no=Math.ceil（4*Math.random（））；/9=随机递减量。计数器将在1-9之间的任意位置递减。
var els=document.getElementsByName（'counter'）；
对于（变量i=0；i3）{
els[i].innerHTML=newNumber；
}否则{
els[i].innerHTML='3'；//计数器为零时显示此消息。
}
}
}
}
startCount（）；
50
50
50
50

我现在使用计数器作为name属性的值，并使用document.getElementsByName（）读取这些名称数组。

顺便说一句，我用Chrome进行了测试。

页面上的每个

id

都必须是唯一的。您应该尝试改用

class=“counter”

。