不太完整，写的太急，等等加上完整注释，写起来还是有些难度的，写的有点水，后面再改进改进。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>原生JS实现分页效果</title>
<style>
body{
margin:100px 200px;
}
#page{
margin:20px 0;
}
#page>#pre,#page>#next{
display:inline-block;
height: 34px;
line-height:34px;
padding: 0 18px;
border: 1px solid #e1e2e3;
text-decoration:none;
}
.list{
display:inline-block;
}
.list a{
text-decoration:none;
padding:0 5px;
}
.list a.current{
color:red;
}
</style>
</head>
<body>
<section id="box"></section>
<div id="page">
<a href="javascript:;" id="pre">上一页</a>
<div class="list"></div>
<a href="javascript:;" id="next">下一页</a>
</div>
</body>
</html>
<script>
'use strict'
// 获取元素
let domBox = document.getElementById("box");
let domPage = document.getElementById("page");
let domPre = document.getElementById("pre");
let domNext = document.getElementById("next");
let domList = document.querySelector(".list");

// 模拟数据
let arrJson = [
'Content_1',
'Content_2',
'Content_3',
'Content_4',
'Content_5',
'Content_6',
'Content_7',
'Content_8',
'Content_9',
'Content_10'
];
let jsonLen = arrJson.length;

// 设置规则
let each = 3;
let page = Math.ceil(jsonLen / each);

// 设置内容
for(let i=0;i<each;i++){
let domP = '<p>'+ arrJson[i] +'</p>';
domBox.innerHTML += domP;
}

// 设置列表页数
for(let i=0;i<page;i++){
let domA = document.createElement('a');
domA.href = 'javascript:;';
domA.innerHTML = i + 1;
domList.insertBefore(domA,null);
}

// 切换页
domList.addEventListener('click',function(e){
let target = e.target;
let targetName = target.nodeName.toLocaleLowerCase();
if(targetName==='a'){
domBox.innerHTML = '';
if(target.innerHTML!=='1'){
if(target.innerHTML==='2'){
for(let i=0;i<each;i++){
let arrJsonCurrent = arrJson[i-1+(target.innerHTML*(each-1))];
if(arrJsonCurrent==null){break;}
let domP = '<p>'+ arrJsonCurrent +'</p>';
domBox.innerHTML += domP;
}
}else if(target.innerHTML==='3'){
for(let i=0;i<each;i++){
let arrJsonCurrent = arrJson[i+(target.innerHTML*(each-1))];
if(arrJsonCurrent==null){break;}
let domP = '<p>'+ arrJsonCurrent +'</p>';
domBox.innerHTML += domP;
}
}else{
for(let i=0;i<each;i++){
let arrJsonCurrent = arrJson[i + (target.innerHTML-each) +(target.innerHTML*(each-1))];
if(arrJsonCurrent==null){break;}
let domP = '<p>'+ arrJsonCurrent +'</p>';
domBox.innerHTML += domP;
}
}
}else{
for(let i=0;i<each;i++){
let arrJsonCurrent = arrJson[i];
if(arrJsonCurrent==null){break;}
let domP = '<p>'+ arrJsonCurrent +'</p>';
domBox.innerHTML += domP;
}
}
}
})
</script>

算法

<!-- 2*2-1 2*3 2*4+1 2*5+2 -->
<!-- 3.4.5 6.7.8 9.10.11 12.13.14 -->

原生JS实现分页效果1.0的更多相关文章

  1. 原生JS实现分页效果2.0（新增了上一页和下一页，添加当前元素样式）

    虽然写的很烂,但至少全部都是自己写的,因为这个没有固定的顺序,所以就没有封装,如果你技术好的话,可以你写的分享给我,谢谢. <!DOCTYPE html><html lang=&qu ...

  2. 原生js显示分页效果

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  3. 原生js实现分页效果（带实例）

    小小插件(静态分页) 效果图: 首先实现简单功能: <!DOCTYPE html> <html> <head> <meta http-equiv=" ...

  4. 原生JS实现弹幕效果

    纯属无聊写的,可能有很多问题,欢迎批评指教. 效果图:图一是预设的一些弹幕,图二是自己发射的弹幕,效果是一样的.   首先是弹幕的位置,是要从最右滑到最左,为了防止随机高度弹幕会覆盖的问题,设置了通道 ...

  5. React.js实现原生js拖拽效果及思考

    一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...

  6. 原生 js 写分页

    欢迎留言或者加本人QQ172360937咨询 这段代码是用原生 js 写的一个分页的效果 <!doctype html> <html lang="en"> ...

  7. 原生js版分页插件

    之前我在自己的博客里发表了一篇用angularJs自定义指令实现的分页插件,今天简单改造了一下,改成了原生JavaScript版本的分页插件,可以自定义一些简单配置,特此记录下来.如有不足之处,欢迎指 ...

  8. 原生JS实现"旋转木马"效果的图片轮播插件

    一.写在最前面 最近都忙一些杂七杂八的事情,复习软考.研读经典...好像都好久没写过博客了... 我自己写过三个图片轮播,一个是简单的原生JS实现的,没有什么动画效果的,一个是结合JQuery实现的, ...

  9. 原生js实现的效果

    原生js实现tooltip提示框的效果   在js的世界里面,每一个小的特效都那么微不足道,却又那么的令人向往与好奇.前端工程师的任务特别高大上,因为他们的一个小小的设计就会激发别人的求知欲.比如说我 ...

随机推荐

  1. java-7311练习(上)

    java练习,仅供参考! 欢迎同学们交流讨论. JDK 1.8 API帮助文档 JDK 1.6 API中文文档 Java GUI -------------------------2016-10-23 ...

  2. BZOJ2683 简单题（CDQ分治）

    传送门 之前听别人说CDQ分治不难学,今天才知道果真如此.之前一直为自己想不到CDQ的方法二很不爽,今天终于是想出来了一道了,太弱-- cdq分治主要就是把整段区间分成两半,然后用左区间的值去更新右区 ...

  3. [XAF] 多级联列表显示

    XAF给的例子已经实现,详细可查看例子中的代码. 工作车间--工作中心--机器

  4. android precelable和Serialization序列化数据传输

    一 序列化原因: 1.永久性保存对象,保存对象的字节序列到本地文件中:2.通过序列化对象在网络中传递对象:3.通过序列化在进程间传递对象. 二 至于选取哪种可参考下面的原则: 1.在使用内存的时候,P ...

  5. 微软connect教程系列—EntityFramework7(三)

      随着Asp.NET5的开源,以及跨平台,ORM框架EF7也与时俱进,支持asp.net core,也支持关系型数据库和非关系型数据库,以及在linux和mac上跨平台使用. 下面演示的即通过使用E ...

  6. 使用Ant自动化我们的java项目生成

    现在我们已经了解如何定义属性.依赖关系以及如何运行ant,接下来我们将学习怎样使用ant编译java源代码并生成jar文件. 编译源代码 由于Ant的主要目标就是生成java应用程序,它内置了java ...

  7. 使用阿里云负载均衡遭遇的http重定向https的问题

    昨天解决了在阿里云负载均衡上部署https证书的问题(详见一个空行引起的阿里云负载均衡上部署https证书的问题),并完成了部署,负载均衡的监听配置是这样的: 用户与负载均衡之间走https协议,负载 ...

  8. ENode 1.0 - 框架的物理部署思路

    开源地址:https://github.com/tangxuehua/enode 上一篇文章,介绍了enode框架的总体目标,以及如何实现高吞吐.低延迟.高可用.无单点问题的实现思路.本篇文章,我们再 ...

  9. [翻译]理解Ruby中的blocks,Procs和lambda

    原文出处:Understanding Ruby Blocks, Procs and Lambdas blocks,Procs和lambda(在编程领域被称为闭包)是Ruby中很强大的特性,也是最容易引 ...

  10. 人人都是 DBA（IV）SQL Server 内存管理

    SQL Server 的内存管理是一个庞大的主题,涉及特别多的概念和技术,例如常见的 Plan Cache.Buffer Pool.Memory Clerks 等.本文仅是管中窥豹,描述常见的内存管理 ...