Javascript随机如何在同一页面上多次重复相同的时间

Javascript random how to repeat same time multiple times on same page

本文关键字：时间 随机 Javascript 一页      更新时间：2023-09-26

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

这是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 "计数器"时，它都有一个不同的倒计时数字。

我会将"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>

我现在使用计数器作为名称属性的值，并使用 document.getElementsByName(( 来读取这些名称数组。顺便说一句，我在 Chrome 中进行了测试。

相关文章：