前端实现换一换功能

一、随机换一换指定数量元素不重复

// 定义一个包含所有可能选项的数组

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();

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,039评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,223评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,916评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,009评论 1 291
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,030评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,011评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,934评论 3 416
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,754评论 0 271
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,202评论 1 309
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,433评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,590评论 1 346
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,321评论 5 342
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,917评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,568评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,738评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,583评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,482评论 2 352

推荐阅读更多精彩内容