JavaScript 实现数组随机显示且不重复-html教程-PHP中文网

JavaScript 实现数组随机显示且不重复

DDD

发布： 2025-10-25 08:01:22

原创

495人浏览过

javascript 实现数组随机显示且不重复

本文将介绍如何使用 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 代码。

降重鸟

要想效果好，就用降重鸟。AI改写智能降低AIGC率和重复率。

113

查看详情

// 原始数组
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 算法可以保证数组乱序的均匀性。

以上就是JavaScript 实现数组随机显示且不重复的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

Sass模块化开发：利用局部文件构建可维护的CSS架构优化移动端导航栏粘性定位：纯CSS方案实现 CSS实现子元素文本底部精确对齐教程构建悬停下拉导航栏：CSS定位与交互指南 CSS布局技巧：如何在子元素内部实现文本底部对齐