Question

我已经在JS中创建了一些简单的彩票功能。一切正常。

我面临的唯一问题是如何显示所有已经猜到的数字？

我有6个独立的空格，必须提供数字，我的目标是显示随机数字中的滚动数字，必须在6个空格之一中提供。这对我有用，但仅显示1个数字。

我正在寻找解决方案，如何显示所有猜测的数字？

function losowanie1() {
  var wybor = 6;
  var dostepne = 6;
  r = new Array(dostepne)

  var xd0 = document.getElementById("pole1").value
  var xd1 = document.getElementById("pole2").value
  var xd2 = document.getElementById("pole3").value
  var xd3 = document.getElementById("pole4").value
  var xd4 = document.getElementById("pole5").value
  var xd5 = document.getElementById("pole6").value

  y = new Array(6)
  y[0] = xd0
  y[1] = xd1
  y[2] = xd2
  y[3] = xd3
  y[4] = xd4
  y[5] = xd5

  z = new Array(6)

  for (var i = 0; i <= dostepne - 1; i++) {
    r[i] = Math.floor((Math.random() * (49 - 1)) + 1);
    if ((y[i] == r[0]) || (y[i] == r[1]) || (y[i] == r[2]) || (y[i] == r[3]) || (y[i] == r[4])) {
      document.getElementById("zatw").innerHTML = y[i]
    }
  }

  document.getElementById("wysw").innerHTML = r;
}

<div id="wysw"></div>
<div id="dupa">
  <input type="text" id="pole1" /><input type="text" id="pole2" /><input type="text" id="pole3" /><input type="text" id="pole4" /><input type="text" id="pole5" /><input type="text" id="pole6" />
  <br></br>
  <input type="reset" id="tak" value="zatwierdz" onclick="losowanie1();" />
  <br></br>
  <div id="zatw"></div>

Answer 1

下面仍然遗漏的是确保用户不要在输入中重复数字。
我不会这样做，因为我既不会为此目的而使用输入，而是会使用预定义的复选框（是38个复选框），并确保在提交时准确地选中了 6个。

无论如何，希望这会有所帮助：

function lottoGenerate(min, max) {
  // Shuffle: https://stackoverflow.com/a/6274381/383904
  const a = Array.from({length: max}, (_, v) => v + 1);
  for (let i = a.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [a[i], a[j]] = [a[j], a[i]];
  }
  return a.slice(0, min);
}

function play() {
  const guessed_nums = [];
  const lotto_nums = lottoGenerate(6, 38); // Generate 6 random unique lotto numbers	
  const player_nums = Array.from(document.querySelectorAll('.num')).map(el => {
    const n = parseInt(el.value, 10);
    const isGuessed = lotto_nums.includes(n);
    if (isGuessed) {
      guessed_nums.push(n); // Insert the guessed number!
      el.style.background = 'lightgreen';
    } else {
      el.style.background = 'red'
    }
    return n
  });

  document.getElementById('gen').textContent = lotto_nums.join(', ');
  document.getElementById('player').textContent = player_nums.join(', ');
  document.getElementById('response').innerHTML = `
    You guessed ${guessed_nums.length} numbers!<br>
    The numbers are: ${guessed_nums.join(', ')}
  `;
}

document.getElementById('play').addEventListener('click', play);

<input class="num" type="number" min=1 max=38 value="1">
<input class="num" type="number" min=1 max=38 value="2"><br>
<input class="num" type="number" min=1 max=38 value="3">
<input class="num" type="number" min=1 max=38 value="4"><br>
<input class="num" type="number" min=1 max=38 value="5">
<input class="num" type="number" min=1 max=38 value="26"><br>
<button id="play">PLAY LOTTO 6/38</button>
<div>Numbers: <span id="gen"></span></div>
<div>User played: <span id="player"></span></div>
<div id="response"></div>

如何在此彩票功能中显示所有猜中的数字？

1 个答案: