一、随机换一换指定数量元素不重复
// 定义一个包含所有可能选项的数组
const options = ['选项1', '选项2', '选项3', '选项4', '选项5', '选项6', '选项7', '选项8', '选项9', '选项10'];
// 指定要随机选择的元素数量
const numberOfElementsToSelect = 3;
// 定义一个函数，用于从数组中随机选择指定数量的元素
function getRandomElements(array, count) {
// 创建一个结果数组，用于存储随机选择的元素
const result = [];
// 如果要选择的元素数量大于数组长度，则抛出错误
if (count > array.length) {
throw new Error('选择的元素数量不能大于数组长度');
}
// 使用while循环，直到结果数组达到指定长度
while (result.length < count) {
// 生成一个随机索引
const randomIndex = Math.floor(Math.random() * array.length);
// 如果随机选择的元素尚未在结果数组中，则将其添加到结果数组中
if (!result.includes(array[randomIndex])) {
result.push(array[randomIndex]);
}
}
// 返回结果数组
return result;
}
// 调用函数并输出结果
try {
const randomElements = getRandomElements(options, numberOfElementsToSelect);
console.log('随机选择的元素:', randomElements);
} catch (error) {
console.error(error.message);
}
二、按顺序换一换，指定个数，末尾不补齐，有几个展示几个，再从头开始换一换
// 定义一个函数来更新显示的内容
let updateDisplay = (list, n) => {
console.log('list---', list, n);
// 计算要显示的三个元素的索引范围
let startIndex = currentIndex;
let endIndex = startIndex + n;
let displayElements = [];
let tmpArr = [];
if (endIndex > list.length) {
displayElements = list.slice(startIndex, list.length);
currentIndex = 0;
}else {
displayElements = list.slice(startIndex, endIndex);
// 更新当前索引
currentIndex = endIndex;
}
console.log(tmpArr, displayElements);
// 更新显示内容
displayElement.innerHTML = displayElements.join(", ");
};
let currentIndex = 0;
// 定义一个数组，包含要展示的元素
let elements = ["元素1", "元素2", "元素3", "元素4", "元素5", "元素6", "元素7", "元素8"];
// 获取显示元素的容器和按钮元素
let displayElement = document.getElementById("display");
// 初始化显示内容
updateDisplay(elements, 3);
三、按顺序换一换，当前索引超出数组长度，会从头开始补齐数量进行换一换
示例1——
HTML
<div class="container">
<div id="display">
<button id="changeButton" onclick="updateDisplay(elements, 4)">换一换
</div>
JS
// 定义一个函数来更新显示的内容
let updateDisplay = (list, n) => {
console.log('list---', list, n);
// 计算要显示的三个元素的索引范围
let startIndex = currentIndex;
let endIndex = startIndex + n;
let displayElements = [];
let tmpArr = [];
if (endIndex > list.length) {
tmpArr = list.slice(0, (endIndex - list.length));
displayElements = list.slice(startIndex, list.length);
displayElements = displayElements.concat(tmpArr);
currentIndex = endIndex - list.length;
}else {
displayElements = list.slice(startIndex, endIndex);
// 更新当前索引
currentIndex = endIndex;
}
console.log(tmpArr, displayElements);
// 更新显示内容
displayElement.innerHTML = displayElements.join(", ");
};
let currentIndex = 0;
// 定义一个数组，包含要展示的元素
let elements = ["元素1", "元素2", "元素3", "元素4", "元素5"];
// 获取显示元素的容器和按钮元素
let displayElement = document.getElementById("display");
// 初始化显示内容
updateDisplay(elements, 4);
示例2——
// 定义一个包含所有可能选项的数组
const options = ['选项1', '选项2', '选项3', '选项4', '选项5'];
// 指定要展示的元素数量
const displayCount = 3;
// 当前展示的元素的索引（从0开始）
let currentIndex = 0;
// 定义一个函数，用于按顺序展示指定数量的元素
function displayElementsInOrder(array, count, startIndex) {
// 创建一个空数组来存储当前要展示的元素
const displayedElements = [];
// 使用for循环来按顺序添加元素到展示的数组中
for (let i = 0; i < count; i++) {
// 计算当前要添加的元素的索引（考虑循环）
const elementIndex = (startIndex + i) % array.length;
// 将元素添加到展示的数组中
displayedElements.push(array[elementIndex]);
}
// 返回当前要展示的元素数组
return displayedElements;
}
// 定义一个函数，用于按顺序换一换并输出新的元素
function changeElements() {
// 计算下一个要展示的元素的起始索引
currentIndex = (currentIndex + displayCount) % options.length;
// 获取当前要展示的元素数组
const currentElements = displayElementsInOrder(options, displayCount, currentIndex);
// 输出当前展示的元素（这里只是打印到控制台，你可以根据需要修改）
console.log('当前展示的元素:', currentElements);
}
// 初始调用以展示第一批元素
const initialElements = displayElementsInOrder(options, displayCount, currentIndex);
console.log('初始展示的元素:', initialElements);
// 模拟换一换的操作（这里只是连续调用几次来展示效果）
changeElements(); // 第二次展示
changeElements(); // 第三次展示
changeElements(); // 第四次展示（会从头开始）
示例3——
const pageInfo = reactive({
movieList: [
{ name: '1', url: 'https://movie.douban.com/subject/1292052/', rate: 9.6 },
{ name: '2', url: 'https://movie.douban.com/subject/1295644/', rate: 9.4 },
{ name: '3', url: 'https://movie.douban.com/subject/1291546/', rate: 9.5 },
{ name: '4', url: 'https://movie.douban.com/subject/1292720/', rate: 9.4 },
{ name: '5', url: 'https://movie.douban.com/subject/1292063/', rate: 9.5 },
{ name: '6', url: 'https://movie.douban.com/subject/1291561/', rate: 9.2 },
{ name: '7', url: 'https://movie.douban.com/subject/1295124/', rate: 9.4 },
{ name: '8', url: 'https://movie.douban.com/subject/1292001/', rate: 9.2 },
{ name: '9', url: 'https://movie.douban.com/subject/2131459/', rate: 9.3 },
{ name: '10', url: 'https://movie.douban.com/subject/3541415/', rate: 9.2 },
{ name: '11', url: 'https://movie.douban.com/subject/3541415/', rate: 9.2 },
{ name: '12', url: 'https://movie.douban.com/subject/3541415/', rate: 9.2 }
],
randomMovieList: [],
currentIndex: 0 // 新增一个变量来跟踪当前索引
})
const changeLimit =()=> {
const num = 10; // 每次取的数量
const temp_array = pageInfo.movieList.slice(); // 复制一份电影列表
const return_array = [];
for (let i = 0; i < num; i++) {
if (pageInfo.currentIndex >= temp_array.length) {
pageInfo.currentIndex = 0; // 如果索引超出范围，重置为0
}
return_array.push(temp_array[pageInfo.currentIndex]);
pageInfo.currentIndex++;
}
pageInfo.randomMovieList = return_array;
console.log(pageInfo.randomMovieList,'randomMovieList')
}
示例四——
// 定义一个包含所有可能选项的数组
const options = ['选项1', '选项2', '选项3', '选项4', '选项5'];
// 指定要展示的元素数量（不补齐）
const displayCount = 3;
// 当前展示的元素的起始索引（从0开始）
let startIndex = 0;
// 定义一个函数，用于按顺序获取指定数量的元素（不补齐）
function getNextElements(array, count, currentIndex) {
const result = [];
let currentIndexCopy = currentIndex; // 避免直接修改传入的参数
for (let i = 0; i < count; i++) {
// 计算当前索引（考虑循环）
const elementIndex = currentIndexCopy % array.length;
// 如果索引在数组范围内，则添加元素到结果数组
if (elementIndex < array.length) {
result.push(array[elementIndex]);
}
// 注意：这里我们不需要检查数组长度是否足够，因为题目要求不补齐
// 更新索引以获取下一个元素
currentIndexCopy++;
}
// 返回结果数组和新的起始索引（用于下一次调用）
// 但在这个例子中，我们只需要结果数组，因为新的起始索引可以通过结果数组长度和当前索引计算出来
return result;
}
// 但由于我们不需要每次都重新计算起始索引，我们可以简化调用过程：
function displayNextElements() {
// 获取下一批元素
const nextElements = getNextElements(options, displayCount, startIndex);
// 更新起始索引（为了下一次调用，但在这个简化例子中我们没有直接用到它）
// startIndex = (startIndex + displayCount) % options.length; // 这行其实可以省略，因为我们只关心当前批次的元素
// 输出当前展示的元素（这里只是打印到控制台，你可以根据需要修改）
console.log('当前展示的元素:', nextElements);
// 如果需要的话，可以在这里更新UI或执行其他操作
}
// 初始调用以展示第一批元素
displayNextElements();
