在一组间隔后生成数字答案

【问题标题】：Generating number after a set of interval在一组间隔后生成数字
【发布时间】：2015-11-21 11:31:18
【问题描述】：

我试图每隔 20 秒显示一次随机数。我下面的代码仅在浏览器刷新时显示。我想要发生的是数字变化而不刷新浏览器的无限循环范围为 1 - 100

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

visitorounter()

【问题讨论】：

可以使用setInterval(visitorounter,20000);（或函数末尾的setTimeout(visitorounter, 20000);）重复函数本身，但您似乎想覆盖现有值。如何覆盖问题的现有元素部分？

标签： javascript loops hitcounter

【解决方案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>");
});

【讨论】：

【解决方案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;

【讨论】：

【解决方案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

【讨论】：

【解决方案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();

&lt;p id="randomNumber"&gt;&lt;/p&gt;

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

参考资料：

【讨论】：