我制作了一个 JavaScript 数组随机化器,它每隔一段时间显示一个元素。我想让它们在没有间隔的情况下一次显示一个,但带有按钮。当我单击按钮时,它将切换到下一个元素,但在此之前它保持不变。你能帮我做吗?
var numberStrings = ["One", "Two", "Three", "Four", "Five", "Six"];
var i = 0;
setInterval(function() {
document
.getElementById('numberList')
.innerHTML = numberStrings[i++];
if (i == numberStrings.length) i = 0;
}, 2000);
function shuffleUsingRandomSwapping(array) {
var j, x, i = 0,
len = array.length;
for (i; i < len; i++) {
j = Math.floor(Math.random() * len);
x = array[i];
array[i] = array[j];
array[j] = x;
}
}
<button onclick="shuffleUsingRandomSwapping(numberStrings);updateNumberList(numberStrings);">Shuffle Using Random Swapping</button>
<div id="numberList"></div>
var numberStrings = ["One", "Two", "Three", "Four", "Five", "Six"];
var curElement = 0;
function updateNumberList() {
document
.getElementById('numberList')
.innerHTML = numberStrings[curElement++];
if (curElement == numberStrings.length) curElement = 0;
}
function shuffleUsingRandomSwapping(array) {
var j, x, i = 0,
len = array.length;
for (i; i < len; i++) {
j = Math.floor(Math.random() * len);
x = array[i];
array[i] = array[j];
array[j] = x;
}
}
<button onclick="shuffleUsingRandomSwapping(numberStrings);updateNumberList(numberStrings);">Shuffle Using Random Swapping</button>
<div id="numberList"></div>
我不知道您的情况,但如果您只想在每次按下按钮时显示数组中的随机元素,则应该以更简单的方式完成,而无需重新排列数组。
var numberStrings = ["One", "Two", "Three", "Four", "Five", "Six"];
function displayRandomElem() {
document
.getElementById('numberList')
.innerHTML = numberStrings[Math.floor(Math.random() * numberStrings.length)];
}
<button onclick="displayRandomElem()">Shuffle Using Random Swapping</button>
<div id="numberList"></div>
要以随机顺序显示值,以便它们不会重复,请使用下一个代码:
var numberStrings = ["One", "Two", "Three", "Four", "Five", "Six"];
function displayRandomElem() {
if (numberStrings.length == 0) return;
document
.getElementById('numberList')
.innerHTML = numberStrings.splice(Math.floor(Math.random() * numberStrings.length), 1);
}
<button onclick="displayRandomElem()">Shuffle Using Random Swapping</button>
<div id="numberList"></div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句