原生js实现分页插件效果

分页插件效果

分页插件效果需求：

网站千千万，分页插件几乎全都有，大部分都有这个功能。所以我讲解一下用原生js来写分页插件效果。
分页插件主要就是显示当前页面，和首页，尾页，上一页，下一页等功能的实现。当然具体的功能下面来说。话不多说，开干！

效果图：

当然是先上效果图啦，当然代码的实现运行效果上面就有。

HTML&CSS代码:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>分页插件</title><link rel="stylesheet" href="./index.css">
</head><body><div id="pagercontainer"></div><script src="./idnex.js"></script><script>var pagercontainer = document.getElementById('pagercontainer');// 1. 当前页码  2. 总页码数 3. 中间的分页项目的个数 4. 放入哪个容器createPager(25, 50, 5, pagercontainer);</script>
</body></html>

HTML中含有js代码，我会再js中给出解释，这里不做解释

#pagercontainer {margin-top: 100px;text-align: center;
}a {font-size: 25px;border: 1px solid #e1e2e3;color: #001ac4;user-select: none;height: 50px;line-height: 50px;padding: 0 12px;margin: 8px;cursor: pointer;user-select: none;
}a.active {border: none;color: #f40;cursor: auto;
}a.disabled {color: #999;cursor: not-allowed;
}

js

首先是分析一下分页插件都是什么功能，各个功能又要怎么去完成，最后如何用代码写出来。

首先页面上要有当前页码，总页数，分页创建好后放在哪一个容器里面，分页插件的中间显示几个数字，所以要有这四个变量，所以我先创建一个函数createPager用来传入这四个参数，用来执行相关操作。所以我会在html中写入那两行js代码，那两行代码在js文件中写入都是一样，写在html纯属是因为老师教我这样写的，这样写比较好判断，嘿嘿。

写好函数后，开始写代码，动手写核心代码时，要思考一下从哪里开始写，怎么写。我是从创建容器开始，这个容器里面是页面上显示的html，所以我是开始完成这个需求：
1). 首先是创建这个容器元素，然后加上class类。然后写一个函数，有三个参数，分别是样式类，中间的文本，点击后跳转到哪一页这三个参数，所以在之前创建的createPager函数里面在写一个createAnchor函数。
2). 然后再这个createAnchor函数里面创建a元素，给a元素挂上对应的样式类，再设置中间的文本，然后把a元素添加进创建的容器里面。然后给a元素注册一个鼠标点击事件，在事件里面分析一下，跳转就是重新调用一个第一次写的createPager函数，但是有几种情况是不能跳转的：（1）跳转的页数小于1和跳转的页数大于总页数和跳转的页数等于当前的页码，这三种情况不能跳转，所以做判断，直接返回，什么也不做。然后其他的情况是可以跳转的，所以执行调用第一次写的createPager函数，传入四个参数。
3). 然后就是开始创建分页了，分析一下，一共有四个部分，分别是首页和上一页、中间显示的数字、下一页和尾页、当前的页码显示这四个部分，然后这个部分分别来写。首先是首页和上一页 ；如果当前是第一页，那么直接调用两次createAnchor函数，第一次传入(’disabled‘,‘首页’，‘1’)，第二次传入(‘disabled’, ‘上一页’, page - 1)，因为是要有首页和上一页，所以调用两次这个函数，传入两次这个函数。然后再else一下，重新调用一下这个函数两次，只不过传入的参数disabled去掉，因为可以点击，所以去掉，等于1时不可以点击，所以要传入这个样式。然后是中间显示的数字；因为数据多，所以我用循坏来生成，但是要计算最大值和最小值，所以我们要找到最小值和最大值，拿当前的页码减去中间显示的数字/2取整就是最小值，然后最小值要是小于1，就等于1，最大值就是最小值加上中间的数字减去1，如果最大值大于总页码，那么最大值就是总页码值。然后回到刚才的循环中，i初始值是最小值，最大值是最大值。如果i等于了当前页码，那么直接调用一下createAnchor函数，传入(“active”, i, i);，ekse中去掉active样式。然后再开始写下一页和尾页；下一页和尾页于首页和上一页写法一样，只是判断的条件变为当前页码等于总页码，然后做相应的操作。最后当前页码的显示；只需要创建一个span元素，给span元素加入相应的内容或者样式，最后添加进容器中即可，然后最后将生成好的分页全部添加进容器里面即可。还有一个最重要的步骤，那就是清空，再做后续的生成容器之前，我们要将上一次的内容先清空。

js代码：

function createPager(pager, pagerNumber, middlePager, container) {// 清空container.innerText = '';var divpager = document.createElement('div');pager.className = 'pager';/** className:样式类* text:中间的显示文本* newPager: 点击后跳转到哪一页*/function createAnchor(className, text, newPager) {var a = document.createElement('a');a.className = className;a.innerText = text;divpager.appendChild(a);a.onclick = function() {// 做相应的三种情况的判断if (newPager < 1 || newPager > pagerNumber || newPager === pager) {return;}createPager(newPager, pagerNumber, middlePager, container);}}// 首页和上一页if (pager === 1) {createAnchor('disabled', '首页', 1)createAnchor('disabled', '上一页', pager - 1)} else {createAnchor('', '首页', 1)createAnchor('', '上一页', pager - 1)}// 中间的数字var min = Math.floor(pager - middlePager / 2);if (min < 1) {min = 1;}var max = min + middlePager - 1;if (max > pagerNumber) {max = pagerNumber;}for (var i = min; i <= max; i++) {if (i === pager) {createAnchor('active', i, i);} else {createAnchor('', i, i);}}// 下一页和尾页if (pager === pagerNumber) {createAnchor('disabled', '下一页', pager + 1)createAnchor('disabled', '尾页', pagerNumber);} else {createAnchor('', '下一页', pager + 1)createAnchor('', '尾页', pagerNumber);}// 当前页var span = document.createElement('span');span.innerText = pager + "/" + pagerNumber;divpager.appendChild(span);// 添加进容器中container.appendChild(divpager);
}

若有错误，敬请指正。

JavaScript小案例------js实现分页插件效果篇相关推荐

javaScript小案例------js实现手风琴效果篇
原生js书写手风琴效果 js手风琴效果第一种方法手风琴需求 html和css: html: css: js animate.js index.js 第二种方法 js手风琴效果我用了两种方法来完成 ...
javaScript小案例------js实现无缝轮播图效果篇
原生js书写无缝轮播图 javaScript无缝轮播图思路及源码无缝轮播图效果总体思路下面附上代码: html css animate.js index.js javaScript无缝轮播图思路 ...
JavaScript小案例程序保存（完整代码+效果展示）
1.案例--点击button换照片 html部分 <!DOCTYPE html> <html lang="en"> <head><meta ...
HTML+CSS+JavaScript小案例（注册页面表单验证轮播图跳转主页动态表格select联动）
案例:(表单验证) <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
Javascript小案例（一）：仿淘宝搜索框用户输入事件的实现
淘宝是我们经常用的一个网上购物平台,打开淘宝网首页,找到淘宝首页的搜索框,如下如所示: (截图日期:2017年6月18日) 大家可以看到,当页面一打开,搜索框中就可以看到灰色字体"少女高跟鞋 ...
JavaScript小案例——登入页面（密码小眼睛）
题目: 制作一个简单的登入页面,运用到简单的js技巧,实现密码框中小眼睛的功能. 注意:本篇介绍的案例没有运用到大量的js技巧,和页面渲染,只是简单的页面和交互.例如,输入密码不正确,检测输入栏是否为 ...
javascript小案例-----tab栏切换
效果如下: 代码思路: 上面的选项卡,点击某一个,当前这一个会变成粉红色,其他不变(排他思想) 修改类名的方式下面的内容会随着上面的选项卡变化,所以下面的模块变化要写到点击事件里面下面的模块显示内 ...
javascript小案例-----快递单号查询
要求: 当我们在文本中输入内容时,文本框自动显示大字号的内容效果如下: 代码思路: 快递单号输入内容时,上面的大号字体盒子( con)显示(这里面的字号更大) 表单检测用户输入∶给表单添加键盘事件 ...
JavaScript小案例——分时显示不同图片，显示不同问候语
要求: 1.根据不同时间,页面显示不同的问候语. 2.如果上午时间打开画面,显示上午好,显示上午的照片.中午,晚上同理. 分析: 1.根据不同系统不同时间来判断,所有需要用到日期内置对象. 2.利用多 ...
JavaScript 小案例弹幕
功能: 1.输入框内输入文字,点击发送,或按enter键 2.框内文字清空 3.文字随机从屏幕左边运动至屏幕右边 4.文字运动到右边界结束消失所有代码: <!DOCTYPE html> ...

JavaScript小案例------js实现分页插件效果篇

原生js实现分页插件效果

原生js实现分页插件效果

分页插件效果

分页插件效果需求：

效果图：

HTML&CSS代码:

js

js代码：

JavaScript小案例------js实现分页插件效果篇相关推荐

最新文章

热门文章