我用 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>
下面仍然缺少的是确保用户不会在输入中重复数字。
我不会这样做，因为我既不会为此目的使用输入，而是使用预定义的复选框（是的，38 个复选框）并确保在提交时恰好有 6 个checked.
无论如何，希望这可能有所帮助：
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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
