时间戳

首页 > 解决方案 > 乐透发电机从最低到最高产生

javascript - 乐透发电机从最低到最高产生

问题描述

我正在开发一个彩票生成器，我目前有一个代码，可以通过单击按钮生成 1-9 的 6 个随机数。但是，它不符合我的数字。我想要它从最小到最大。我还有一个文本区域，上面写着位数。所以对于位数，如果我输入 3，它将生成 3 个数字。目前我的按钮点击只生成 6。对于我的代码，我目前有一个 html 和 javascript 文件。

    let btn = document.getElementById("btnSend");
    let luckynumbers = document.querySelector("#result");

    function lottonumbers(min, max) {
        return Math.round(Math.random() * (max - min) + min);
    }

    function showRandomNUmbers() {
        var numbers = [],
            random;

        for (var i = 0; i < 6; i++) {

            random = lottonumbers(1, 49);

            numbers.push(random);

        }

        luckynumbers.value = numbers.join("  ,  ");

    }
    btn.onclick = showRandomNUmbers;
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AJAX Lotto</title>
    <link rel="stylesheet" href="css/main.css" />

    <style>

    </style>
</head>
<body>
    <div id="randomNumbers" class="page">
        <header>
            <h1>$ LOTTO NUMBERS $</h1>
        </header>
        <section class="main">
            <p class="formBox">
                <label for="digits">Number of Digits</label>
                <input id="digits" type="number" max="10" min="1" placeholder="6" />
            </p>
            <p class="formBox">
                <label for="max">Range</label>
                <span>1 to </span><input id="max" type="number" min="2" max="99" placeholder="49" />
            </p>
            <p class="formBox buttons">
                <button id="btnSend">Generate Numbers</button>
            </p>
        </section>
    </div>
    <div id="list" class="page">
        <header>
            <h1>YOUR LUCKY NUMBERS!</h1>
        </header>
        <section class="main">
            <p id="errorMessage"></p>

            <output id="result">Press "Generate Numbers" for your lucky lottery numbers!</output>
<!--
            <ul id="result">
                 display the generated numbers from the server 
            </ul>
-->
            <p>
                <button onclick id="btnBack">Start Again</button>
            </p>

            <p id="demo"></p>
        </section>
    </div>
    <script src="js/main.js"></script>
</body>
</html>

标签： javascript

解决方案

所以这里有两件事。您需要对生成的数字数组进行排序，以使它们从低到高显示。我已经添加了功能sortfunction来做到这一点。您需要使用此函数并将其传递给numbers.sort()调用以生成排序后的数字。

此外，您从未从页面中获取过位数，因此我添加了showRandomNUmbers获取字段值的函数digits以仅正确显示所需的位数。

let btn = document.getElementById("btnSend");
let luckynumbers = document.querySelector("#result");

function lottonumbers(min, max) {
  return Math.round(Math.random() * (max - min) + min);
}

function showRandomNUmbers() {
  var numbers = [],
    random;

  let digits = document.getElementById("digits");
  let numDigits = digits.value;
  if (digits.value == "") {
    numDigits = digits.placeholder;
  }
  for (var i = 0; i < numDigits; i++) {

    random = lottonumbers(1, 49);

    numbers.push(random);

  }
  numbers = numbers.sort(sortfunction);

  luckynumbers.value = numbers.join("  ,  ");

}

function sortfunction(a, b) { //causes an array to be sorted numerically and ascending
  return (a - b)
}
btn.onclick = showRandomNUmbers;
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>AJAX Lotto</title>
  <link rel="stylesheet" href="css/main.css" />

  <style>

  </style>
</head>

<body>
  <div id="randomNumbers" class="page">
    <header>
      <h1>$ LOTTO NUMBERS $</h1>
    </header>
    <section class="main">
      <p class="formBox">
        <label for="digits">Number of Digits</label>
        <input id="digits" type="number" max="10" min="1" placeholder="6" />
      </p>
      <p class="formBox">
        <label for="max">Range</label>
        <span>1 to </span><input id="max" type="number" min="2" max="99" placeholder="49" />
      </p>
      <p class="formBox buttons">
        <button id="btnSend">Generate Numbers</button>
      </p>
    </section>
  </div>
  <div id="list" class="page">
    <header>
      <h1>YOUR LUCKY NUMBERS!</h1>
    </header>
    <section class="main">
      <p id="errorMessage"></p>

      <output id="result">Press "Generate Numbers" for your lucky lottery numbers!</output>
      <!--
            <ul id="result">
                 display the generated numbers from the server 
            </ul>
-->
      <p>
        <button onclick id="btnBack">Start Again</button>
      </p>

      <p id="demo"></p>
    </section>
  </div>
  <script src="js/main.js"></script>
</body>

</html>

推荐阅读