Question

我试图在20秒后显示随机数。我在下面的代码仅在浏览器刷新时显示。我想要发生的是数字更改，而无需刷新浏览器的无限循环范围从1 - 100

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

visitorounter()

Answer 1

您自己的方法存在的问题可能是在文档出现之后使用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用于实验和开发。

参考文献：

Answer 2

这应该可以解决问题

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 3

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

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 4

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

// 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

在一组间隔

4 个答案: