1

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

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

visitorounter()
4

4 回答 4

2

您自己的方法的问题很可能是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 演示。

参考：

于 2015-08-27T08:01:53.157 回答
0

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

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

于 2015-08-27T07:55:52.930 回答
0

这应该可以解决问题

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>");
});
于 2015-08-27T07:42:14.403 回答
0

使用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;
于 2015-08-27T07:42:28.893 回答