【发布时间】:2020-11-18 07:15:48
【问题描述】:
我已经阅读了很多关于这个常见问题的其他帖子,我鼓励任何看到这个问题的人通读整个帖子。我发现的其他解决方案都不适合我(我在下面列出了失败的尝试)。
我有一个使用 HTML 和 JavaScript 的正常运行的随机生成器。每次按下按钮时,该函数都会从数组中选择一个项目并使用:'document.getElementById' 显示它。有关工作功能,请参见下面的 sn-p。我的问题是我不喜欢它背靠背或在其他一些项目被看到之前显示相同数组项目的方式;该功能太随机了。我一直在努力寻找一种方法来更改我的随机函数,以便它只在整个数组循环后才显示重复项。
var oddnumber = [
'111',
'222',
'333',
'444',
'555',
]
var oddletter = [
'AAA',
'BBB',
'CCC',
'DDD',
'EEE',
]
function newThing() {
if(numberCheck.checked) {
var randomY = oddnumber;
}
if(letterCheck.checked) {
var randomY = oddletter;
}
var randomX = Math.floor(Math.random() * (randomY.length));
var y = randomY;
var x = randomX;
document.getElementById("thingDisplay").innerHTML = y[x];
}
<body>
<div id='thingDisplay'></div>
<div>
<button class="box" id="button01" onclick="newThing()">New Thing</button>
</div>
<div>
<form>
Number<label> <input type="radio" name="thing" id="numberCheck"/></label>
<br/>Letter<label> <input type="radio" name="thing" id="letterCheck"/></label>
</form>
</div>
</body>
许多答案详细说明了对数组进行切片并将切片推到底部的不同方法,但我不确定这是否是我正在寻找的。将显示的项目放在单独的数组中是我想避免的事情,因为在现实世界中我可能会使用数千个数组项目,所以它可能效率不高。
尝试 1 失败:
var oddnumber = [
'111',
'222',
'333',
'444',
'555',
]
var oddletter = [
'AAA',
'BBB',
'CCC',
'DDD',
'EEE',
]
function newThing() {
if(numberCheck.checked) {
var randomY = oddnumber;
}
if(letterCheck.checked) {
var randomY = oddletter;
}
var res = randomY.sort(function() {
return 0.5 - Math.random();
});
console.log(res.slice(randomY,1))
document.getElementById("thingDisplay").innerHTML = [console.log];
}
<body>
<div id='thingDisplay'></div>
<div>
<button class="box" id="button01" onclick="newThing()">New Thing</button>
</div>
<div>
<form>
Number<label> <input type="radio" name="thing" id="numberCheck"/></label>
<br/>Letter<label> <input type="radio" name="thing" id="letterCheck"/></label>
</form>
</div>
</body>
尝试 2 失败:
var oddnumber = [
'111',
'222',
'333',
'444',
'555',
]
var oddletter = [
'AAA',
'BBB',
'CCC',
'DDD',
'EEE',
]
function newThing() {
if(numberCheck.checked) {
var randomY = oddnumber;
}
if(letterCheck.checked) {
var randomY = oddletter;
}
var selected;
var temp;
var str = "";
var stub = "";
for(var i = 0; i < randomY.length; i++){
temp = randomY[i][Math.floor(Math.random() * randomY[i].length)];
while(selected.contains(temp)){
temp = randomY[i][Math.floor(Math.random() * randomY[i].length)];
}
selected.push(temp);
str += temp;
if(i < randomY.length - 1){str += stub;}
}
var x = i;
document.getElementById("thingDisplay").innerHTML = y[x];
}
<body>
<div id='thingDisplay'></div>
<div>
<button class="box" id="button01" onclick="newThing()">New Thing</button>
</div>
<div>
<form>
Number<label> <input type="radio" name="thing" id="numberCheck"/></label>
<br/>Letter<label> <input type="radio" name="thing" id="letterCheck"/></label>
</form>
</div>
</body>
编辑: 保留确定 randomY 值的“document.getElementById”和“if”语句至关重要。
【问题讨论】:
-
你有一个不想要太随机的例子吗?
-
@NinaScholz 是的,防止该功能显示重复项目(即:在显示任何其他项目之前多次显示 222 次)并且仅显示相同项目一次,每隔一个项目至少显示一次。跨度>
-
也许这是一个...,您正在寻找:stackoverflow.com/questions/40056297/…
-
@SMAKSS 恐怕这是另一个不适用于我的情况的答案。
标签: javascript html math button random