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

<!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. Log4j 与 Logback的ConversionPattern对比

    为了能将log4j的配置无缝转到logback,需要了解其中ConversionPattern的差异,以下是对比表格,内容来自: log4j官网 logback官网 其中可能需要转换的地方主要有两块: ...

  2. 联想Phab2 Pro Tango手机测评

    评分:8分 优点:创新的AR应用手机,可以当成一个游戏机了 缺点:还没找到 评语:打开新世界的大门,现实与虚拟结合,枯燥的生活添加一点幻想,走进童话般的梦幻王国,丰富多彩 包装 外形 打开主界面 最主 ...

  3. 一些IOS开发中的小技巧

    1.打包后提交报错误 错误信息:ERROR ITMS-90035: "Invalid Signature. Code object is not signed at all. The bin ...

  4. 关于PHP堆栈与列队

    在PHP中数组常被当作堆栈(后进先出:LIFO)与队列(先进先出:FIFO)结构来使用.PHP提供了一组函数可以用于push与pop(堆栈)还有shift与unshift(队列)来操作数组元素.堆栈与 ...

  5. vim中输入tab符

    今天在写Makefile时各种出错.后来发现是all:的下一行,make前面必须是tab符,不能是空格. 但是vim中只要按tab就会自动转换成4个空格.平时编程需要,也不便把这个设置取消. 查了下, ...

  6. andriod studio

    初衷:使用andriod的webview调用html页面,生成app. AVD注意细节: RAM : 1G VM heap:228MB Graphics:software - GLES 2.0 存在的 ...

  7. ImageView

    ImageView支持的XML属性及相关方法 XML属性 相关方法 说明 android:adjustViewBounds setAdjustViewBounds(boolean) 是否调整自己的边界 ...

  8. Emacs-24.1 + ECB-2.40 + cscope-15.7a + cedet 无root权限指定目录安装与配置

    emacs等安装在-/INSTALL目录下,在-下新建一个INSTALL目录. 1. emacs-24.1.tar.gz ecb-2.40.tar.gz cscope-15.7a.tar.bz2下载到 ...

  9. 怎样让.bat文件开机自启动

    Windows Registry Editor Version 5.00 [HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\R ...

  10. .net笔记

    一.垃圾回收 1.运行.NET应用程序时,程序创建出来的对象都会被CLR跟踪, 2.哪些对象还会被用到(存在引用关系):哪些对象不会再被用到(不存在引用关系),CLR都是有记录的. 3.CLR会整理不 ...