Question

我希望我的按钮每次单击时在1和3之间生成3个不同的数字，并且所生成的数字显示在不同的html元素中。

我正在为我的“ guessGame”创建一个按钮。我已经创建了包含按钮和div元素的界面，用于存储t生成数字的输出。但是，我希望生成1到3之间不冲突的不同数字并将其存储在每个div元素中。我正在使用javaScript

HTML

File

css

<div class="scores">
    <div class="scoreDisplay scoreDisplay--1"></div>
    <div class="scoreDisplay scoreDisplay--2"></div>
    <div class="scoreDisplay scoreDisplay--3"></div>
</div>

<a href="#" id="startGame">Start Game</a>

JavaScript

.scores{
  position:absolute;
  left:50%;
  top: 25%;
  transform:translate(-50%,-50%);
}

.scoreDisplay{
  width:100px;
  height:100px;
  border:1px solid black;
  display:inline-block;
  margin:10px;
  font-size:3rem;
  text-align:center;
  padding-top:20px;

  &--1{
    background:yellow;
  }
  &--2{
    background:orangered;
  }
  &--3{
    background:green;
  }
}

#startGame{
  text-decoration:none;
  text-transform:uppercase;
  padding: 15px 45px;
  border: 1px solid blue;
  border-radius:5px;
  color:blue;
  position:absolute;
  left:50%;
  top:60%;
  transform:translate(-50%,-50%);
  margin-top:20px;

  &:hover{
    background:blue;
    color:white;
  }
}

我希望在每个div元素中生成并显示3个不同的数字而不会发生冲突。我现在所生成的数字有时在显示它们的2个或所有div元素中有时相同。

这是codepen中的链接https://codepen.io/myportfolios/pen/BvWYdK。

感谢您的预期答复。祝您编码愉快！

Answer 1

您真正想做的是获取[1, 2, 3]数组并对其进行混洗。我会这样：

const numbers = [];
const shuffled = [];

// prepare array of sorted numbers [1, 2, 3]
for(let i=0; i<scoreDisplay.length; i++)
  numbers.push(i + 1);

// shuffle the array by picking random position in sorted array and moving it to result array
while (numbers.length > 0)
  shuffled.push(numbers.splice(Math.floor(Math.random() * numbers.length), 1)[0]);

// print result
for(let i=0; i<scoreDisplay.length; i++)
    scoreDisplay[i].textContent = shuffled[i];

Answer 2

我认为这可以满足您的要求：

startGame.addEventListener("click", function() {
    // create an array of valid values, then shuffle them
    var nums = [1,2,3].sort(_ => 0.5 - Math.random());
    for(var i=0; i<scoreDisplay.length; i++) {
      // grab 1 (the last element) from the array
      scoreDisplay[i].textContent = nums.pop();
    }
});

Answer 3

由于您只想生成三个随机数并且不应该发生冲突，为什么不能使用随机排列其中包含3个数字的数组 var arr = [1,2,3];

每次玩家点击开始游戏时，数组都会随机播放。

混排数组->> How to randomize (shuffle) a JavaScript array?

谢谢

Answer 4

尝试以下-

    Math.floor(Math.random() * 3)

如何通过单击js按钮生成1和3之间的三个不同的随机数

4 个答案: