本文将介绍如何使用 JavaScript 实现一个数组的随机显示功能，点击按钮后，数组中的元素会依次随机显示在页面上，且不会重复显示同一个元素，直到所有元素都显示完毕。同时，提供重置按钮，以便重新开始随机显示。
核心思路
实现该功能的关键在于以下几点：
数组乱序（Shuffle）： 在显示之前，需要对原始数组进行乱序处理，以保证每次显示的元素都是随机的。索引控制： 使用一个索引变量来记录当前显示的元素位置，每次点击按钮后，索引递增。边界判断： 在索引递增之前，需要判断索引是否超出数组的范围，如果超出，则不再显示任何元素。重置功能： 提供一个重置按钮，点击后重新对数组进行乱序，并将索引重置为 0，以便重新开始显示。
实现步骤
1. HTML 结构
首先，在 HTML 文件中添加一个按钮和一个用于显示元素的段落。
立即学习“Java免费学习笔记（深入）”；
随机显示数组元素
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 = 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 算法可以保证数组乱序的均匀性。
以上就是JavaScript 实现数组随机显示且不重复的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1588378.html
微信扫一扫 
支付宝扫一扫 
