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

Question

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

这是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>

这是我在HTML中的调用方式

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

我希望能够使用相同的倒数在页面上多次显示ID“计数器”。 问题是每次我显示ID“计数器”时，它都有一个不同的倒计时数字。

Answer 1

我将'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>

我现在使用counter作为名称属性的值，并使用document.getElementsByName（）读取名称数组。 顺便说一句，我在Chrome中进行了测试。

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

问题描述

1 个解决方案

解决方案1
0 2016-02-17 07:08:50

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

问题描述

1 个解决方案

解决方案1 0 2016-02-17 07:08:50

解决方案1
0 2016-02-17 07:08:50