本文将介绍如何使用 JavaScript 实现一个数组的随机显示功能，点击按钮后，数组中的元素会依次随机显示在页面上，且不会重复显示同一个元素，直到所有元素都显示完毕。同时，提供重置按钮，以便重新开始随机显示。
核心思路
实现该功能的关键在于以下几点：
- 数组乱序（Shuffle）： 在显示之前，需要对原始数组进行乱序处理，以保证每次显示的元素都是随机的。
- 索引控制： 使用一个索引变量来记录当前显示的元素位置，每次点击按钮后，索引递增。
- 边界判断： 在索引递增之前，需要判断索引是否超出数组的范围，如果超出，则不再显示任何元素。
- 重置功能： 提供一个重置按钮，点击后重新对数组进行乱序，并将索引重置为 0，以便重新开始显示。
实现步骤
1. HTML 结构
首先，在 HTML 文件中添加一个按钮和一个用于显示元素的段落。
立即学习“Java免费学习笔记（深入）”；
<!DOCTYPE html> <html> <head> <title>随机显示数组元素</title> </head> <body> <p id="element-display"></p> <button id="next-button">下一个</button> <button id="reset-button">重置</button> <script src="script.js"></script> </body> </html>
2. JavaScript 代码
接下来，在 script.js 文件中编写 JavaScript 代码。
// 原始数组
const arr = ['x', 'y', 'z'];
// 获取 HTML 元素
const displayElement = document.getElementById('element-display');
const nextButton = document.getElementById('next-button');
const resetButton = document.getElementById('reset-button');
// 乱序后的数组
let shuffledArr = shuffle(arr);
// 索引
let index = 0;
// 点击“下一个”按钮的事件处理函数
nextButton.addEventListener('click', () => {
if (index < shuffledArr.length) {
displayElement.textContent = shuffledArr[index];
index++;
} else {
displayElement.textContent = '已显示所有元素';
}
});
// 点击“重置”按钮的事件处理函数
resetButton.addEventListener('click', () => {
shuffledArr = shuffle(arr);
index = 0;
displayElement.textContent = '';
});
// 数组乱序函数 (Fisher-Yates shuffle)
function shuffle(array) {
let currentIndex = array.length, randomIndex;
// While there remain elements to shuffle.
while (currentIndex != 0) {
// Pick a remaining element.
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex--;
// And swap it with the current element.
[array[currentIndex], array[randomIndex]] = [
array[randomIndex], array[currentIndex]];
}
return array;
}代码解释：
- arr：定义原始数组。
- displayElement, nextButton, resetButton：获取对应的 HTML 元素。
- shuffledArr：存储乱序后的数组，初始值为对原始数组进行乱序的结果。
- index：记录当前显示的元素的索引，初始值为 0。
- nextButton.addEventListener('click', ...)：为“下一个”按钮添加点击事件监听器。
- 在事件处理函数中，首先判断 index 是否小于 shuffledArr.length，如果小于，则将 shuffledArr[index] 的值显示在 displayElement 中，并将 index 递增 1。
- 如果 index 大于等于 shuffledArr.length，则表示所有元素都已显示，显示 "已显示所有元素"。
- resetButton.addEventListener('click', ...)：为“重置”按钮添加点击事件监听器。
- 在事件处理函数中，重新对原始数组进行乱序，并将 index 重置为 0，同时清空 displayElement 的内容。
- shuffle(array)：实现数组乱序的函数，采用 Fisher-Yates shuffle 算法。
3. 样式 (可选)
可以根据需要添加 CSS 样式来美化页面。
body {
font-family: sans-serif;
text-align: center;
}
button {
padding: 10px 20px;
margin: 10px;
cursor: pointer;
}总结
通过以上步骤，我们就实现了一个简单的数组随机显示且不重复的功能。 该功能可以应用于各种场景，例如随机显示广告语、随机显示图片等。 核心在于数组乱序算法和索引控制。 使用 Fisher-Yates shuffle 算法可以保证数组乱序的均匀性。
