生成随机数10次

generating random number 10 times

本文关键字：10次 随机数      更新时间：2023-09-26

我正在练习while循环的赋值，并尝试使用Math.random生成一个10次迭代的循环，所以每次都会得到一个随机数。相反，我连续10次列出相同的数字。不确定我在这里做错了什么？在HTML中使用可以同时显示所有结果。

<script type="text/javascript">
    var x = 0;
    function showResults() {
    var randomNum = Math.floor(Math.random() * 999) + 1;
    loopOutput = "";
        while (x < 10) {
        x++;
       document.getElementById("loopResults").innerHTML += "<p>Our answer: " + x + ". " + randomNum + "</p>";
    }} //end function showResults()
</script>

只需将随机数的计算移动到循环中：

var x = 0;
function showResults() {
loopOutput = "";
    while (x < 10) {
    var randomNum = Math.floor(Math.random() * 999) + 1;
    document.getElementById("loopResults").innerHTML += "<p>Our answer: " + x + ". " + randomNum + "</p>";
    x++;
}} //end function showResults()

<script type="text/javascript">
    var x = 0;
    function showResults() {
    loopOutput = "";
        while (x < 10) {
        var randomNum = Math.floor(Math.random() * 999) + 1;
        x++;
       document.getElementById("loopResults").innerHTML += "<p>Our answer: " + x + ". " + randomNum + "</p>";
    }} //end function showResults()
</script>

当函数被调用时，随机数只生成一次，但你需要生成10次，所以你把

var randomNum = Math.floor(Math.random() * 999) + 1;

在while循环内部，在结束时它将看起来像这样：

<script type="text/javascript">
var x = 0;
function showResults() {
loopOutput = "";
    while (x < 10) {
    var randomNum = Math.floor(Math.random() * 999) + 1;
    x++;
   document.getElementById("loopResults").innerHTML += "<p>Our answer: " + x + ". " + randomNum + "</p>";
}} //end function showResults()

  1. 你只生成一个随机数。在循环内生成随机
  2. 在循环中，您不断地调用DOM解析器来查找元素，而不是使用变量loopOutput来连接HTML字符串
  3. 将变量放在函数的范围内：

相反：

function showResults() {
  var x = 0,
      loopOutput = "";
  while (x < 10) {
    x++;
    var randomNum = Math.floor(Math.random() * 999) + 1;
    loopOutput +=  "<p>Our answer: " + x + ". " + randomNum + "</p>";
  }
  // Append HTML only once!
  document.getElementById("loopResults").innerHTML = loopOutput;
}
showResults();
<div id="loopResults"></div>

相关文章：