一组间隔后生成数字

Question

我正在尝试每隔 20 秒显示一次随机数。我下面的代码仅在浏览器刷新时显示。我想要发生的是在 1 - 100

的无限循环中不刷新浏览器的数字变化

function visitorounter(){
        var randomnumber=Math.floor(Math.random()*100);
        document.write("<strong>"+randomnumber+"</strong>");
}

visitorounter()

Answer 1

这应该可以解决问题

setInterval(function counter() {
  var randomnumber=Math.floor(Math.random()*100);
    document.write("<strong>"+randomnumber+"</strong>");
}, 20000);

或者像这样：

(function counter(cb) {
  setTimeout(function() { 
    cb(); 
    return counter(cb); 
  }, 20000);
})(function() {
  var randomnumber=Math.floor(Math.random()*100);
    document.write("<strong>"+randomnumber+"</strong>");
});

Answer 2

使用setInterval()并设置20000 ms（毫秒）

setInterval(function() {
    visitorounter();
}, 20000);

但是，最好使用带递归的 setTimeout 循环。

function myTimeout() {
    setTimeout(function() {
        visitorounter();
        myTimeout(); // recursive function call
    }, 20000);
}
myTimeout();

第二个版本的性能要好很多。

如果您想要更改数字，请不要使用 document.write()，而是创建一个具有 id 的元素并使用它。

<div id="counter"></div>

并将 document.write 替换为：

document.getElementById('counter').innerHTML = randomnumber;

Answer 3

这将生成具有特定计数器范围的随机数或具有特定随机范围的无限循环：

// fixed to 1
var i = 1;
// 0 infinite loop OR 1 and higher for specific count range
var max_count = 0;
// delay in second
var delay = 20;
var randomRange = 100;

function myCounter() {
    // first random number
    if (i == 1) {
        visitorounter();
        i++;
        myCounter();
    } else {
        // delayed random numbers
        setTimeout(function () {
            visitorounter();
            i++;
            if (i <= max_count) {
                myCounter();
            }
            if (max_count == 0) {
                myCounter();
            }
        }, (delay * 1000))
    }
}

myCounter();

function visitorounter() {
    document.getElementById('randomNumber').innerHTML = Math.floor(Math.random() * randomRange);
}

并将以下行添加到您的 html

<div id="randomNumber"></div>

灵感http://www.w3schools.com/js/tryit.asp?filename=tryjs_setinterval2

Answer 4

您自己的方法的问题很可能是在文档加载完成后使用 document.write；这会导致页面重新加载以显示或完全被提供的 HTML.

字符串覆盖

我建议采用以下方法（作为众多备选方案之一）：

// using a named function to generate the random numbers:
function randomNumber () {
    return Math.floor(Math.random() * 100);
}
function visitorounter() {

    // retrieving the element in which the random number
    // should be shown:
    var elem = document.getElementById('randomNumber');

    // updating that element's text-content to show the
    // first random number immediately:
    elem.textContent = randomNumber();

    // setting the interval (20000ms) after which the
    // the supplied anonymous function should be run:
    window.setInterval(function () {

        // updating the text of the element:
        elem.textContent = randomNumber();
    }, 20000);
}

visitorounter();

function randomNumber() {
  return Math.floor(Math.random() * 100);
}

function visitorounter() {
  var elem = document.getElementById('randomNumber');
  elem.textContent = randomNumber();
  window.setInterval(function() {
    elem.textContent = randomNumber();
  }, 20000);
}

visitorounter();

<p id="randomNumber"></p>

外部 JS Fiddle demo 用于实验和开发。

参考文献：

一组间隔后生成数字

Generating number after a set of interval

javascript

loops

hitcounter