17370845950

本文将介绍如何使用 JavaScript 实现一个数组的随机显示功能，点击按钮后，数组中的元素会依次随机显示在页面上，且不会重复显示同一个元素，直到所有元素都显示完毕。同时，提供重置按钮，以便重新开始随机显示。

核心思路

实现该功能的关键在于以下几点：

1. 数组乱序（Shuffle）： 在显示之前，需要对原始数组进行乱序处理，以保证每次显示的元素都是随机的。
2. 索引控制： 使用一个索引变量来记录当前显示的元素位置，每次点击按钮后，索引递增。
3. 边界判断： 在索引递增之前，需要判断索引是否超出数组的范围，如果超出，则不再显示任何元素。
4. 重置功能： 提供一个重置按钮，点击后重新对数组进行乱序，并将索引重置为 0，以便重新开始显示。

实现步骤

1. HTML 结构

首先，在 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 算法可以保证数组乱序的均匀性。