Question

所以我建立了这个网页，并且在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>

Answer 1

math.random（）函数不是“种子” - 因此每次加载页面并调用您展示的函数时，可能会返回相同的值。

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

您可以将其与评论中建议的数组/检查器功能结合使用，以确保唯一的数字。

Answer 2

创建一个数字数组，从1-37开始随机排序，然后pop()从循环数组中的最后一个数字。 pop()删除数组的最后一个elemtn，这样就不会有重复项

＆＃13;

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();
  }
}

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

随机数java脚本

2 个答案: