JavaScript實現(xiàn)定時器循環(huán)展示數(shù)組

更新時間：2022年09月01日 10:02:37 作者：凡小多

這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)定時器循環(huán)展示數(shù)組，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了JavaScript實現(xiàn)定時器循環(huán)展示數(shù)組的具體代碼，供大家參考，具體內(nèi)容如下

先看看效果圖

流程

使用數(shù)組的slice() 方法通過條件判斷截取原數(shù)組相應(yīng)內(nèi)容組成新數(shù)組

循環(huán)數(shù)組

let currentPage = 0
// arr:原數(shù)組 newLen:新數(shù)組需要的長度 currentPage:現(xiàn)在的頁碼

// 方法一：
function loopData(arr, newLen) {
? let len = arr.length;
? let result = len - currentPage;
? let newArr = [];
? if (result > 0 && result < newLen) {
? ? newArr = [
? ? ? ...arr.slice(currentPage - result, len),
? ? ? ...arr.slice(0, newLen - result),
? ? ];
? ? currentPage = newLen - result;
? } else if (result >= newLen) {
? ? newArr = arr.slice(currentPage, currentPage + newLen);
? ? currentPage += newLen;
? } else {
? ? currentPage = 0;
? ? newArr = arr.slice(currentPage, currentPage + newLen);
? }
? return newArr;
}

// 方法二：
function loopData(arr, newLen) {
? let len = arr.length;
? let newArr = [];
? if (currentPage === len) {?? ?// 頁碼等于數(shù)組長度時，從0重新開始
? ? currentPage = 0;
? }
? if (currentPage + newLen <= len) {
? ? newArr = [...arr.slice(currentPage, currentPage + newLen)];
? ? currentPage++;
? } else if (currentPage + newLen > len && currentPage < len) {
? ? newArr = [
? ? ? ...arr.slice(currentPage, len),
? ? ? ...arr.slice(0, newLen - len + currentPage),
? ? ];
? ? currentPage++;
? }
? return newArr;
}

簡單案例

<template>
? <div class="container">
? ? <el-button @click="changeStatus">{{ flag ? "暫停" : "開始" }}</el-button>
? ? {{ list }}
? </div>
</template>

<script>
let currentPage = 0;
export default {
? data() {
? ? return {
? ? ? arr: [1, 2, 3, 4, 5, 6, 7],
? ? ? list: [],
? ? ? timer: null,
? ? ? flag: true,
? ? };
? },
? mounted() {
? ? this.start()
? },
? destroyed() {
? ? this.timer && clearInterval(this.timer);
? },
? methods: {
? ? changeStatus() {
? ? ? if (this.flag) {
? ? ? ? this.timer && clearInterval(this.timer);
? ? ? } else {
? ? ? ? this.start();
? ? ? }
? ? ? this.flag = !this.flag;
? ? },
? ? start() {
? ? ? this.timer = setInterval(() => {
? ? ? ? this.list = this.loopData(this.arr, 4);
? ? ? }, 1000);
? ? },
? ? loopData(arr, newLen) {
? ? ? let len = arr.length;
? ? ? let newArr = [];
? ? ? if (currentPage === len) {
? ? ? ? currentPage = 0;
? ? ? }
? ? ? if (currentPage + newLen <= len) {
? ? ? ? newArr = [...arr.slice(currentPage, currentPage + newLen)];
? ? ? ? currentPage++;
? ? ? } else if (currentPage + newLen > len && currentPage < len) {
? ? ? ? newArr = [
? ? ? ? ? ...arr.slice(currentPage, len),
? ? ? ? ? ...arr.slice(0, newLen - len + currentPage),
? ? ? ? ];
? ? ? ? currentPage++;
? ? ? }
? ? ? return newArr;
? ? },
? },
};
</script>

<style lang="scss" scoped>
.container {
? padding: 20px;
}
</style>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: