原生JS实现分页效果2.0（新增了上一页和下一页，添加当前元素样式）
虽然写的很烂，但至少全部都是自己写的，因为这个没有固定的顺序，所以就没有封装，如果你技术好的话，可以你写的分享给我，谢谢。
<!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 domList = document.querySelector(".list");
let preNum = 0;
// 模拟数据
let arrJson = [
{title:'title_1',content:'Content_1'},
{title:'title_2',content:'Content_2'},
{title:'title_3',content:'Content_3'},
{title:'title_4',content:'Content_4'},
{title:'title_5',content:'Content_5'},
{title:'title_6',content:'Content_6'},
{title:'title_7',content:'Content_7'},
{title:'title_8',content:'Content_8'},
{title:'title_9',content:'Content_9'},
{title:'title_10',content:'Content_10'}
];
let jsonLen = arrJson.length;
// 设置规则
let each = 3;
let page = Math.ceil(jsonLen / each);
// 设置内容
for(let i=0;i<each;i++){
let domP = '<div>';
domP += '<h1>'+ arrJson[i].title +'</h1>';
domP += '<p>'+ arrJson[i].content +'</p>';
domP += '</div>'
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);
}
// 获取元素
let domListChild = domList.children;
// 获取页数
let domListLen = domListChild.length;
// 记录上一次单击的元素
let preDom = domList.children[0];
preDom.className = 'current';
// 切换页
domList.addEventListener('click',function(e){
// 获取目标元素
let target = e.target;
// 获取目标元素的标签名，并统一转换成小写
let targetName = target.nodeName.toLocaleLowerCase();
if(targetName==='a'){
// 添加class
preDom.className = '';
target.className = 'current';
// 改变当前单击的元素。
preDom = target;
// 改变当前元素索引
preNum = target.innerHTML-1;
// 先清空上个页面的内容
domBox.innerHTML = '';
// 因为顺序在1，2，3的时候没有规则，所以进行了判断。
if(target.innerHTML!=='1'){
if(target.innerHTML==='2'){
// 遍历每页的条数，并将内容添加到domBox中。
for(let i=0;i<each;i++){
let arrJsonCurrent = arrJson[i-1+(target.innerHTML*(each-1))];
if(arrJsonCurrent==null){break;}
let domP = '<div>';
domP += '<h1>'+ arrJsonCurrent.title +'</h1>';
domP += '<p>'+ arrJsonCurrent.content +'</p>';
domP += '</div>';
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 = '<div>';
domP += '<h1>'+ arrJsonCurrent.title +'</h1>';
domP += '<p>'+ arrJsonCurrent.content +'</p>';
domP += '</div>';
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 = '<div>';
domP += '<h1>'+ arrJsonCurrent.title +'</h1>';
domP += '<p>'+ arrJsonCurrent.content +'</p>';
domP += '</div>';
domBox.innerHTML += domP;
}
}
}else{
for(let i=0;i<each;i++){
let arrJsonCurrent = arrJson[i];
if(arrJsonCurrent==null){break;}
let domP = '<div>';
domP += '<h1>'+ arrJsonCurrent.title +'</h1>';
domP += '<p>'+ arrJsonCurrent.content +'</p>';
domP += '</div>';
domBox.innerHTML += domP;
}
}
}
})
// 获取上一页和下一页元素
let pagePreDom = document.getElementById('pre');
let pageNextDom = document.getElementById('next');
// 上一页
pagePreDom.addEventListener('click',function(){
// 判断当前元素索引
if(preNum>0){
preNum --;
}
changeHtml(domBox,preNum,each);
})
// 下一页
pageNextDom.addEventListener('click',function(){
// 判断当前元素索引
if(preNum<domListLen-1){
preNum ++;
}
changeHtml(domBox,preNum,each);
})
// 改变box内容
function changeHtml(domBox,currentNum,each){
domBox.innerHTML = '';
preDom.className = '';
domListChild[currentNum].className = 'current';
preDom = domListChild[currentNum];
switch(currentNum){
case 0:
// 遍历元素
for(let i=0;i<each;i++){
let arrJsonCurrent = arrJson[currentNum+i];
if(arrJsonCurrent==null){break;}
let domP = '<div>';
domP += '<h1>'+ arrJsonCurrent.title +'</h1>';
domP += '<p>'+ arrJsonCurrent.content +'</p>';
domP += '</div>';
domBox.innerHTML += domP;
}
break;
case 1:
// 遍历元素
for(let i=0;i<each;i++){
let arrJsonCurrent = arrJson[each+i];
if(arrJsonCurrent==null){break;}
let domP = '<div>';
domP += '<h1>'+ arrJsonCurrent.title +'</h1>';
domP += '<p>'+ arrJsonCurrent.content +'</p>';
domP += '</div>';
domBox.innerHTML += domP;
}
break;
default:
// 遍历元素
for(let i=0;i<each;i++){
let arrJsonCurrent = arrJson[currentNum*each+i];
if(arrJsonCurrent==null){break;}
let domP = '<div>';
domP += '<h1>'+ arrJsonCurrent.title +'</h1>';
domP += '<p>'+ arrJsonCurrent.content +'</p>';
domP += '</div>';
domBox.innerHTML += domP;
}
break;
}
}
</script>
原生JS实现分页效果2.0（新增了上一页和下一页，添加当前元素样式）的更多相关文章
- 原生JS实现分页效果1.0
不太完整,写的太急,等等加上完整注释,写起来还是有些难度的,写的有点水,后面再改进改进. <!DOCTYPE html><html lang="en">&l ...
- 原生js实现分页效果（带实例）
小小插件(静态分页) 效果图: 首先实现简单功能: <!DOCTYPE html> <html> <head> <meta http-equiv=" ...
- 原生js显示分页效果
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- 原生js版分页插件
之前我在自己的博客里发表了一篇用angularJs自定义指令实现的分页插件,今天简单改造了一下,改成了原生JavaScript版本的分页插件,可以自定义一些简单配置,特此记录下来.如有不足之处,欢迎指 ...
- 原生JS实现弹幕效果
纯属无聊写的,可能有很多问题,欢迎批评指教. 效果图:图一是预设的一些弹幕,图二是自己发射的弹幕,效果是一样的. 首先是弹幕的位置,是要从最右滑到最左,为了防止随机高度弹幕会覆盖的问题,设置了通道 ...
- JS实现分页效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- React.js实现原生js拖拽效果及思考
一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...
- 关于js实现分页效果的简单代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- 分页-jquery.page.js插件在使用时重复触发“上一页”和“下一页”操作
HTML代码 <!-- <div class="zxf_pagediv" id="Pagination" style="display:b ...
随机推荐
- jquery datepicker 只显示年月
首先修改默认日期赋值 <script type="text/javascript"> $(function(){ $('#searchDate').datepicker ...
- 2.一起来学hibernate之配置文件1与持久化对象
学框架,配置都是不可少的,有了配置,框架才知道我们想做什么,才知道如何去执行我们需要的操作! hibernate的配置文件,总体来说分为两个部分: 1.主配置文件hibernate.cfg.xml文件 ...
- 大气漂亮的jQuery水晶样式下拉菜单
预览地址:http://demo.zzblo.com/sc/2013/11/201311131041 下载地址:http://sc.zzblo.com/js/201311/79.html
- Git凭证存储（简单易懂，一学就会，认真看）
今天给自己提了一个问题,当我们在github.com或者gitlab上面新建仓库,并克隆到本地,首次使用的时候,会被问及用户名密码,但是这两个信息存在哪里呢? 带着这个问题,我开始搜索,并在<P ...
- LoadRunner参数化取值及连接数据库操作步骤
很多情况下,参数添加的数据不是十条二十条,也不是一百两百,对于这种大数量的数据我们可以通过数据库将数据导入: 选中要参数化的内容如下图一所示: 方法一,右键---[Replace with a new ...
- C++混合编程之idlcpp教程Lua篇(8)
上一篇在这 C++混合编程之idlcpp教程Lua篇(7) 第一篇在这 C++混合编程之idlcpp教程(一) 与前面的工程相似,工程LuaTutorial6中,同样加入了四个文件:LuaTutori ...
- Mac OS X 10.9.3 UI 设置界面无法设置时区解决
10.9.3 在选项设置里无法设置时区,表现为选择时区的点的位置后无法保存,导致系统时间错乱,解决方法是用终端设置: sudo systemsetup -gettimezone sudo system ...
- VS2012 编译带有c/c++代码的python模块失败解决方案
python2.7默认编译带有/c++代码的模块/包是使用VS2008环境变量,所以为了可用,我们要在编译前设置环境变量 SET VS90COMNTOOLS=%VS110COMNTOOLS% 但有时只 ...
- 【Hello CC.NET】自动化发布时 Web.config 文件维护
在 <[Hello CC.NET]CC.NET 实现自动化集成> 的 HellowWorld 中经实现: 1.获取源码 2.编译项目 3.集成测试 4.Ftp发布项目 5.创建安装包 6. ...
- RCP：给GEF编辑器添加网格和标尺。
网格和标尺效果如上图所示. 添加网格比较简单,也可以自己实现,主要思路是为编辑器添加一个GridLayer.但是还是建议参考eclipse自己的GEF样例来实现. 需要注意两个部分: 1.重写org. ...