J*aScript 实现数组随机显示且不重复_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

J*aScript 实现数组随机显示且不重复

2025-10-25

浏览次数：次

返回列表

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

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

核心思路

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

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

实现步骤

1. HTML 结构

首先，在 HTML 文件中添加一个按钮和一个用于显示元素的段落。

<!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. J*aScript 代码

接下来，在 script.js 文件中编写 J*aScript 代码。

MarsCode

字节跳动旗下的免费AI编程工具

339 查看详情

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

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

相关栏目：【科技资讯46185 】【网络学院92790 】

上一篇：使用 Three.js 加载 OBJ 模型时 MTLLoader 报错的解决方案

下一篇：Formik中实现onChange事件触发与组件重渲染的教程

首页

关于我们

产品展示

咨询研究

新闻中心

留言板

联系我们

新闻中心 NEWS CENTER

J*aScript 实现数组随机显示且不重复

核心思路

实现步骤

总结