随机数 javascript答案

【问题标题】：Random numbers java script随机数 javascript
【发布时间】：2017-11-21 18:32:10
【问题描述】：

所以我构建了这个网页，并在 6 个小盒子中设置了一个包含 6 个随机数的函数。每个数字都有一个盒子，有时我在两个盒子里收到相同的数字，我需要这个不相等。我需要所有盒子上的不同号码。从 1 到 37。大 tnx 给大家！这是函数和所有的css和html设计。

function six() {
  var s = document.getElementsByClassName("trim");
  for (var i = 0; i < s.length; i++) {
    console.log(s[i]);
    s[i].innerHTML = Math.floor((Math.random() * 37) + 1);
  }
}

.lotobox {
  width: 550px;
  height: 100px;
  border: 1px solid black;
  background-color: #0080ff;
  color: #E52A34;
  font-size: 25px;
  text-align: center;
  margin: auto 0;
  padding-bottom: 15px;
}

.numbers {
  width: 550px;
  height: 530px;
  border: 1px solid black;
  background-color: darkcyan;
  color: black;
  text-align: center;
}

th {
  border: 4px solid black;
  width: 70px;
  height: 100px;
  padding: 10px 20px 10px;
  background-color: gray;
  color: black;
  text-align: center;
  font-family: vardana;
  font-size: 40px;
}

td {
  text-align: center;
}

#button {
  width: 110px;
  height: 40px;
  margin: 0 auto;
}

.table1 {
  margin: 0 auto;
}

<!DOCTYPE html>
<html lang="en">

<head>

  <meta charset="UTF-8">
  <title>Loto Aplication</title>
  <link rel="stylesheet" type="text/css" href="mystyle.css">

</head>

<body>
  <div class="lotobox">
    <h1>Loto Box</h1>
  </div>
  <div class="numbers">
    <br><br>
    <table class="table1">
      <tr>
        <th class="trim"></th>
        <th class="trim"></th>
        <th class="trim"></th>
      </tr>
      <tr>
        <th class="trim"></th>
        <th class="trim"></th>
        <th class="trim"></th>
      </tr>
    </table>
    <br>
    <button id="button" onclick="six()">go!</button>
  </div>
</body>

</html>

【问题讨论】：

为什么不维护一个已经使用过的数字列表，并在每次生成随机数时对其进行检查？如果您只是生成随机数，则可以肯定地假设您最终会再次生成相同的数字。

标签： javascript html css random

【解决方案1】：

math.random() 函数没有“播种”——因此每次加载页面并调用函数时可能返回相同的值。

查看以前的 StackOverflow 线程，了解如何编写自己的 javascript 随机种子生成器：Seeding the random number generator in Javascript

您可以将它与 cmets 中建议的数组/检查器功能结合使用，以确保唯一编号。

【讨论】：

【解决方案2】：

创建一个随机排序的 1-37 数字数组，然后 pop() 循环中数组的最后一个。 pop() 删除数组的最后一个元素，所以你永远不会有重复

const nums = new Array(37).fill()
  .map((_, i) => i + 1)
  .sort(() => Math.random() - .5)

function six() {
  var s = document.getElementsByClassName("trim");
  for (var i = 0; i < s.length; i++) {       
    s[i].innerHTML = nums.pop();
  }
}

.lotobox {
  width: 550px;
  height: 100px;
  border: 1px solid black;
  background-color: #0080ff;
  color: #E52A34;
  font-size: 25px;
  text-align: center;
  margin: auto 0;
  padding-bottom: 15px;
}

.numbers {
  width: 550px;
  height: 530px;
  border: 1px solid black;
  background-color: darkcyan;
  color: black;
  text-align: center;
}

th {
  border: 4px solid black;
  width: 70px;
  height: 100px;
  padding: 10px 20px 10px;
  background-color: gray;
  color: black;
  text-align: center;
  font-family: vardana;
  font-size: 40px;
}

td {
  text-align: center;
}

#button {
  width: 110px;
  height: 40px;
  margin: 0 auto;
}

.table1 {
  margin: 0 auto;
}

<!DOCTYPE html>
<html lang="en">

<head>

  <meta charset="UTF-8">
  <title>Loto Aplication</title>
  <link rel="stylesheet" type="text/css" href="mystyle.css">

</head>

<body>
  <div class="lotobox">
    <h1>Loto Box</h1>

  </div>
  <div class="numbers">

    <br><br>

    <table class="table1">
      <tr>
        <th class="trim"></th>
        <th class="trim"></th>
        <th class="trim"></th>
      </tr>
      <tr>
        <th class="trim"></th>
        <th class="trim"></th>
        <th class="trim"></th>
      </tr>
    </table>
    <br>
    <button id="button" onclick="six()">go!</button>
  </div>

</body>

</html>

【讨论】：