2017-11-21 3 views
0

私はこのWebページを構築し、6つの小さなボックスに6つの乱数の関数を付けています。すべての数字がボックスを取得し、ときどき2つのボックスに同じ数値を受け取り、これが等しくないようにする必要があります。私はすべてのボックスに異なる番号が必要です。 1から37まで。Big tnx to everyone !!! これは関数であり、CSSとHTMLのすべてのデザインです。乱数javaスクリプト

  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>

+0

を持つことはありませんので、pop()は、配列の最後のelemtnを削除します乱数?乱数を生成するだけで、最終的に同じ数を再び生成すると想定するのは安全です。 –

答えて

0

math.random()関数は、「播種」されていない - ので、おそらく同じ値にページをロードすると、あなたが展示さてきたように関数を呼び出すたびに返します。

は独自のJavaScriptランダムシードジェネレータを書くことについては、この前のStackOverflowのスレッドをチェックアウト:Seeding the random number generator in Javascript

あなたはコメントで示唆配列/チェッカー機能と連携して固有の番号を確認するためにすることを使用することができます。

0

1から37までの数字の配列をランダムにソートしたものを作成します。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>