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

<!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. 萝卜白菜，给有所爱——C#和JAVA都会终将被时代淘汰

    看到园子里又有一波试图掀起C#和JAVA的谁更好的争论,对于这些一直不断的争论,我觉得实在没有必要,黑格尔的存在即合理,中国的老古语说的萝卜白菜各有所爱,大家争论的再多其实卵用也没用,还不如趁着闲暇时 ...

  2. php模拟登陆的两种实现方法分析

    php模拟登陆的实现方法分析 本文实例分析了php模拟登陆的实现方法.分享给大家供大家参考.具体分析如下: php模拟登陆的实现方法,这里分别列举两种方法实现模拟登陆人人网.具体实例代码如下: 1)使 ...

  3. c#判断是否为合法的email地址

    题目要求: class Program { static void Main(string[] args) { Console.WriteLine("请输入正确的邮箱地址,以 @sina.c ...

  4. 对初学者的MPLS 常见问题

    对初学者的MPLS 常见问题 2015年6月8日 16:04 阅读 186 问:什么是多协议标签交换 (MPLS)? 答:MPLS是一种数据包转发技术,该技术使用标签来做出数据转发决策. 利用MPLS ...

  5. 0002--Weekly Meeting on 27th March and 3th April, 2015

    27th March, 2015 (1) RankNet && PageRank ->reporter: jinquan Du   Web_RankNet  Web_PageRa ...

  6. 记一次troubleshooting（一）：奇慢的脚本

    背景: 事情发生的时间是几年前,那时刚从windows server运维的部门调动过来,对linux和数据库还是处于一知半解的状态. 领导找过来说:前任遗留下来的问题你来调查一下,有个客户说他们的日次 ...

  7. 新版SDWebImage的使用

    第一步,下载SDWebImage,导入工程.github托管地址https://github.com/rs/SDWebImage 第二步,在需要的地方导入头文件 1 #import "UII ...

  8. Hello Raspberry Pi

    Raspberry Pi 入手好一段时间了,原意是想撸 linux,但是后来一整年都在忙孩子房子户口本子的事,这玩意也就搁了一年尘. 最近终于被生活折腾到了尾声,开始找一些东西来折腾折腾. 一.什么是 ...

  9. 在ASP.NET WebAPI 中使用缓存【Redis】

    初步看了下CacheCow与OutputCache,感觉还是CacheOutput比较符合自己的要求,使用也很简单 PM>Install-Package Strathweb.CacheOutpu ...

  10. MySQL6：触发器

    什么是触发器 MySQL的触发器(trigger)和存储过程一样,都是嵌入到MySQL中的一段程序.触发器是由事件来触发某个操作,这些事件包括INSERT.UPDATE和DELETE语句.如果定义了触 ...