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

<!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中把JSON数据格式化输出到控制台

    public class ForMatJSONStr { public static void main(String[] args) { String jsonStr = "{\" ...

  2. VIM使用(二) 浏览内核源代码

    为了实现类似SourceInsight功能,通过VIM+Ctags+Cscope+Taglist+Source Explore +NERD Tree实现． 一, 安装插件 1)安装Ctags 和Csc ...

  3. hdu 5105 求函数极值 函数求导/三分法

    http://acm.hdu.edu.cn/showproblem.php?pid=5105 给定a,b,c,d,l,r,表示有一个函数f(x)=|a∗x3+b∗x2+c∗x+d|(L≤x≤R),求函 ...

  4. 《理解 ES6》阅读整理：函数（Functions）（六）Purpose of Functions

    明确函数的双重作用(Clarifying the Dual Purpose of Functions) 在ES5及更早的ES版本中,函数调用时是否使用new会有不同的作用.当使用new时,函数内的th ...

  5. Git凭证存储（简单易懂，一学就会，认真看）

    今天给自己提了一个问题,当我们在github.com或者gitlab上面新建仓库,并克隆到本地,首次使用的时候,会被问及用户名密码,但是这两个信息存在哪里呢? 带着这个问题,我开始搜索,并在<P ...

  6. node.js初学遇到的问题

    是用express安装一个网站基础架构时 express -t ejs microblog 但是出来的模板引擎是jade,通过修改js也修改模板引用npm install 等等修改了index.ejs ...

  7. Task Runner Explorer for vs2015找不到啊

    https://visualstudiogallery.msdn.microsoft.com/8e1b4368-4afb-467a-bc13-9650572db708/view/ 编译typescri ...

  8. Web Essentials之样式表StyleSheets

    返回Web Essentials功能目录 本篇目录 智能感知 视觉提示 验证 Web标准 转换器 Web Essentials中大多数的CSS功能也适用于LESS. 智能感知 生成供应商特定的属性 如 ...

  9. Sensor（ORIENTATION）

    package com.example.sensor01; import java.util.List; import android.hardware.Sensor; import android. ...

  10. Aoite 系列(01) - 比 Dapper 更好用的 ORM

    Aoite 是一个适于任何 .Net Framework 4.0+ 项目的快速开发整体解决方案.Aoite.Data 适用于市面上大多数的数据库提供程序,通过统一封装,可以在日常开发中简单便捷的操作数 ...