本文将介绍如何使用 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 算法可以保证数组乱序的均匀性。