项目中有个播放列表选集的需求，如下图：

现在展示的1-42集全部，我们如何实现这个选集的功能呢？

我的思路如下：

1.将这42集按每10集划分，并存入数组；

2.保存开始和结束位置，比如说1~10，开始就是1，结束就是10。

下面是我的实现方法：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

    <script>

        let data = [

            '第1集','第2集','第3集','第4集','第5集','第6集','第7集','第8集','第9集','第10集','第11集','第12集','第13集','第14集'

        ]

        let groupCount = 5; //设置你每次想显示多少集

        let dataLength =  data.length;

        let resultArray = [];

        let groupArray = [];

        for(let i=0;i<dataLength;i+=groupCount){

            let start = i+1;

            let end = i+groupCount;

            //把数据按每5集划分

            resultArray.push(data.slice(i,i+groupCount));

            if(end>dataLength){

                end=dataLength

            }

            //保存开始和结束位置

            groupArray.push([start+'~'+end])

        }

        console.log(resultArray,groupArray)

    </script>

</body>

</html>

返回数据如下图：

如您有更好的解决方案，望不吝赐教~感谢阅读~

js实现选集功能的更多相关文章

  1. JS实现注销功能

    JS实现注销功能,代码如下: <script> window.history.forward(1); </script> 这个代码的用法就是: 比如,我们此时有两个页面:Log ...

  2. JS全选功能代码优化

    原文:JS全选功能代码优化 JS全选功能代码优化 最近在看javascript MVC那本书,也感觉到自己写的代码也并不优雅,所以一直在想 用另一种模式来编写JS代码,所以针对之前的简单的JS全选功能 ...

  3. CI 结合 vue.js 的搜索功能模块

    CI 结合 vue.js 的搜索功能模块 最近在有优化公司后台的某个模块的搜索功能优化 原先的是这个样子的,很是单调: 老大给我找个图希望我能弄成这样子: 经过不断修改,最后成了这样子 是不是比以前好 ...

  4. 网站开发进阶(十二)JS实现打印功能(包括打印预览、打印设置等)

    JS实现打印功能(包括打印预览.打印设置等) 绪 最近在进行项目开发时,需要实现后台管理端打印功能,遂在网上一阵搜索,搜到了很多相关的文章.其中绝大部分文章都是使用的Lodop5.0(Web打印和套打 ...

  5. js经常使用功能代码

    js经常使用功能代码(持续更新): 1---折叠与展开 <input id="btnDisplay" type="button" class=" ...

  6. C#设计模式总结 C#设计模式(22)——访问者模式（Vistor Pattern） C#设计模式总结 .NET Core launch.json 简介 利用Bootstrap Paginator插件和knockout.js完成分页功能 图片在线裁剪和图片上传总结 循序渐进学.Net Core Web Api开发系列【2】：利用Swagger调试WebApi

    C#设计模式总结 一. 设计原则 使用设计模式的根本原因是适应变化,提高代码复用率,使软件更具有可维护性和可扩展性.并且,在进行设计的时候,也需要遵循以下几个原则:单一职责原则.开放封闭原则.里氏代替 ...

  7. 使用js批量选中功能实现更改数据库中的status状态值（批量展示）

    我们在开发项目的时候经常会在后台管理时用到批量展示功能来动态的修改数据库的值.下面以修改数据库的status状态值来实现批量展示功能.批量选中功能引用js来实现.前端html代码: <table ...

  8. react.js CMS 删除功能的实现

    页面效果图: 数据操作分析: 在查询表组件的  TableData.js 中操作如下内容: 给每一行绑定一个checkbox,且在点击这个 checkbox 时,触发 action 中的一个方法(fo ...

  9. node.js实现CURL功能

    PHP中的CURL功能很好实现,直接四五行代码封装一下就OK了.node.js中如何实现CURL的功能呢,下面详细介绍. 这里需要用到request这个库,所以先安装此包: npm install r ...

随机推荐

  1. 使用ASIHTTPRequest和ASIDownloadCache实现本地缓存

    源码:http://files.cnblogs.com/ios8/ASIHttpRequestDemo2.zip NSURL *url = [NSURLURLWithString:@"htt ...

  2. 深入理解Linux内核－内核同步

    内核基本的同步机制: 抢占内核的主要特点:一个在内核态运行的进程,可能在执行内核函数期间被另外一个进程取代. 内核抢占:Linux 2.6允许用户在编译内核的时候配置十分启用 进程临界区:每个进程中访 ...

  3. vue.js 首屏优化

    我们以 vue-cli 工具为例,使用 vue-router 搭建SPA应用,UI框架选用 element-ui , ajax方案选用 axios, 并引入 vuex ,使用 vuex-router- ...

  4. Spring Bean 的加载顺序

    一,单一Bean 装载 1. 实例化; 2. 设置属性值; 3. 如果实现了BeanNameAware接口,调用setBeanName设置Bean的ID或者Name; 4. 如果实现BeanFacto ...

  5. c++并行计算库TBB和PPL的基本用法

    并行库充分利用多核的优势,通过并行运算提高程序效率,本文主要介绍c++中两个知名的并行库,一个是intel开发的TBB,一个是微软开发的PPL.本文只介绍其基本的常用用法:并行算法和任务. TBB(I ...

  6. vim中权限不足时不用退出而强制保存

    命令: :w !sudo tee % 此命令是把当前文件(即%)作为stdin传给sudo tee命令来执行.说起来挺绕口,其实就是:用sudo强制保存.   有时候在自己机器上折腾的时候需要更改一些 ...

  7. MFC中获取命令行参数的几种方法

    在MFC程序中,可以用以下几种方法来获取命令行参数. 为方便说明,我们假设执行了命令:C:\test\app.exe -1 -2 方法一 ::GetCommandLine(); 将获取到 " ...

  8. 一句命令激活windows/office

    激活windows 服务器地址:kms.03k.org (点击检测KMS服务器是否正常) 更新: 脚本维护更新:2016-11-02 服务端版本:2017-06-17 (1111) 有疑问可以戳QQ群 ...

  9. 问题-DelphiXE10.1 FireDAC联接oracle数据库方法

    问题现象:安装oracle后,安装Delphi10.1,放FDConnection1时,选择"Ora"驱动时,提示如下: [FireDAC][Phys][Ora]-315. Can ...

  10. iOS 设置导航栏全透明

    - (void)viewWillAppear:(BOOL)animated{ //设置导航栏背景图片为一个空的image,这样就透明了 [self.navigationController.navig ...