您现在的位置是:网站首页> 编程资料编程资料
JavaScript实现定时器循环展示数组_javascript技巧_
2023-05-24
399人已围观
简介 JavaScript实现定时器循环展示数组_javascript技巧_
本文实例为大家分享了JavaScript实现定时器循环展示数组的具体代码,供大家参考,具体内容如下
先看看效果图

流程
使用数组的slice() 方法通过条件判断截取原数组相应内容组成新数组
循环数组
let currentPage = 0 // arr:原数组 newLen:新数组需要的长度 currentPage:现在的页码 // 方法一: 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) { // 页码等于数组长度时,从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; }简单案例
{{ flag ? "暂停" : "开始" }} {{ list }}
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
您可能感兴趣的文章:
相关内容
- VUE中的打包删除文件、图片的HASH码_vue.js_
- Selection与Range 对象操作示例指南_JavaScript_
- vue history模式刷新404原因及解决方法_vue.js_
- vue实现导航栏下拉菜单_vue.js_
- vue实现下拉菜单效果_vue.js_
- vue.config.js中configureWebpack与chainWebpack区别及说明_vue.js_
- vue3如何使用eventBus订阅发布模式_vue.js_
- vue-cli4如何打包静态资源到指定目录_vue.js_
- Vxe-Table开发中的各种坑以及避坑指南_vue.js_
- 如何使用npm安装yarn详解_node.js_
