前端利用html实现分页切换效果

本篇文章主要要实现的功能效果如下：

包含首页尾页上一页下一页总计的页数以及总计的条数还有跳转的功能

整体思想：先定位一个中心页

上一页、下一页就是根据定位中心页然后加减就可以实现

首页就是要根据一次要展示几页，然后分别展示要展示的页数

尾页就是根据总共有的页数进行定位，然后分别展示要展示的页数

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>Document</title><style>.st1 {height: 60px;width: 90%;background-color: #ddd;margin-left: 5%;margin-top: 30px;}.st2 {height: 32px;width: 60px;background-color: #2ac;border-radius: 4px;margin-left: 6px;margin-top: 20px;float: left;color: #fff;text-align: center;line-height: 32px;font-size: 13px;}.chosed {background-color: #a00;}</style>
</head><body><div id="div1" class="st1"></div></body>
<script type="text/javascript">m1(12, 256, 10); //当前页索引，总页数，每页数量function m1(index, allnum, pagesize) {var allpage = allnum / pagesize;allpage = parseInt(allpage);allpage = allnum % 10 > 0 ? allpage + 1 : allpage;if (index < 1) index = 1;if (index > allpage) index = allpage;var x = document.getElementById("div1");var h = '<div class="st2" onclick="m1(1,' + allnum + ',' + pagesize + ')">首页</div>';h += '<div class="st2" onclick="m1(' + (index - 1) + ',' + allnum + ',' + pagesize + ')">上一页</div>';if (index < 3) {if (index == 1) {h += '<div class="st2 chosed" onclick="m1(1,' + allnum + ',' + pagesize + ')">1</div>';h += '<div class="st2" onclick="m1(2,' + allnum + ',' + pagesize + ')">2</div>';} else {h += '<div class="st2" onclick="m1(1,' + allnum + ',' + pagesize + ')">1</div>';h += '<div class="st2 chosed" onclick="m1(2,' + allnum + ',' + pagesize + ')">2</div>';}h += '<div class="st2" onclick="m1(3,' + allnum + ',' + pagesize + ')">3</div>';h += '<div class="st2"onclick="m1(4,' + allnum + ',' + pagesize + ')">4</div>';h += '<div class="st2" onclick="m1(5,' + allnum + ',' + pagesize + ')">5</div>';}if (index >= 3 && index <= (allpage - 2)) {h += '<div class="st2" onclick="m1(' + (index - 2) + ',' + allnum + ',' + pagesize + ')">' + (index - 2) + '</div>';h += '<div class="st2"onclick="m1(' + (index - 1) + ',' + allnum + ',' + pagesize + ')">' + (index - 1) + '</div>';h += '<div class="st2 chosed" onclick="m1(' + index + ',' + allnum + ',' + pagesize + ')">' + index + '</div>';h += '<div class="st2" onclick="m1(' + (index + 1) + ',' + allnum + ',' + pagesize + ')">' + (index + 1) + '</div>';h += '<div class="st2" onclick="m1(' + (index + 2) + ',' + allnum + ',' + pagesize + ')">' + (index + 2) + '</div>';}if (index > (allpage - 2)) {h += '<div class="st2" onclick="m1(' + (index - 4) + ',' + allnum + ',' + pagesize + ')">' + (index - 4) + '</div>';h += '<div class="st2"onclick="m1(' + (index - 3) + ',' + allnum + ',' + pagesize + ')">' + (index - 3) + '</div>';h += '<div class="st2" onclick="m1(' + (index - 2) + ',' + allnum + ',' + pagesize + ')">' + (index - 2) + '</div>';if (index == allpage) {h += '<div class="st2" onclick=" m1(' + (allpage - 1) + ',' + allnum + ',' + pagesize + ')">' + (allpage - 1) + '</div>';h += '<div class="st2 chosed" onclick=" m1(' + allpage + ',' + allnum + ',' + pagesize + ')">' + allpage + '</div>';} else {h += '<div class="st2" onclick=" m1(' + (allpage - 1) + ',' + allnum + ',' + pagesize + ')">' + (allpage - 1) + '</div>';h += '<div class="st2 chosed" onclick=" m1(' + allpage + ',' + allnum + ',' + pagesize + ')">' + allpage + '</div>';}}h += '<div class="st2" onclick=" m1(' + (index + 1) + ',' + allnum + ',' + pagesize + ')">下一页</div>';h += '<div class="st2" onclick=" m1(' + allpage + ',' + allnum + ',' + pagesize + ')">尾页</div>';h += '<div class="st2">共' + allpage + '页</div>';h += '<div class="st2">共' + allnum + '条</div>';h += '<div class="st2"><input id="pageindex" type="text" style="width:50px;height:26px;border:0px;"> </div>';h += '<div class="st2" onclick="gopage(' + allnum + ',' + pagesize + ')">跳转</div>';x.innerHTML = h;}function gopage(allnum, pagesize) {var text = document.getElementById("pageindex").value;text = parseInt(text);m1(text, allnum, pagesize);}
</script></html>

前端利用html实现分页切换效果相关推荐

web前端利用jq实现选项卡切换功能
最近在自学jQuery,利用jQuery现实了一下选项卡的切换实现效果如下图: 功能:鼠标在各个标签中移动时,图片会显示相应的标题人物 html.css.jq代码如下: <!DOCTYPE h ...
利用MATLAB实现图片切换动画效果详解
内容摘要:本博文介绍MATLAB图片切换动画效果的制作以及GIF文件保存,并结合具体代码详细解释.介绍了利用MATLAB编程进行几幅图片的轮流切换,切换时实现与幻灯片切换相似的炫酷的图片切换特效.其中 ...
web前端运用CSS动画实现图像的幻灯片自动播放切换效果
先看一下浏览器运行结果: 一. 最初用"background-image"背景图片属性定义动画,结果幻灯片切换时没有上下滑动的效果. 仅用到HTML和CSS,未用javascrip ...
【jQuery】前端项目实践案例1——使用jQuery制作Tab选项卡点击切换效果
1.实现效果: 案例描述:当用户单击不同的导航时,与其对应的内容回相应的呈现. 案例要求:使用jquery制作实现tab选项卡单击切换效果. 2.实现思路: (1)div+css布局,制作选项卡和对应 ...
精致3D图片切换效果，最适合企业产品展示
这是一个精致的立体图片切换效果,特别适合企业产品展示,可立即用于实际项目中.支持导航和自动播放功能, 基于 CSS3 实现,推荐使用最新的 Chrome,Firefox 和 Safari 浏览器浏览效 ...
纯前端利用 js-xlsx 之合并单元格(3)
前言前两篇文章主要基本导入导出和导出不同格式文件,这次是因为有小伙伴问我怎么合并单元格.其实吧很多东西官网https://github.com/SheetJS/js-xlsx讲的比我清楚多了,不过既 ...
dw如何制作图片自动切换效果_dw怎么用css做图片轮播
Adobe Dreamweaver,简称"DW",中文名称 "梦想编织者",最初为美国MACROMEDIA公司开发 ,2005年被Adobe公司收购.DW是集网 ...
Vue.js实现tab切换效果
tab切换第一步先要把HTML写好,这个第一步很关键,主要分为两块结构 <div id="app"><ul class="tab-tilte" ...
Midnight.js – 实现奇妙的固定头部切换效果
Midnight.js 是一款 jQuery 插件,在页面滚动的时候实现多个头设计之间的切换,所以你总是有一个头与它下面的内容层叠,看起来效果很不错. Midnight.js 可以让你轻松实现这种切换 ...
animate 实现滑动切换效果
今天和大家分享一下用 animate 实现滑动切换效果的小例子 ------- 来自<一只有梦想的前端小白> 大家都知道jQuery 提供的有一下几种方法能够实现滑动效果: slideDo ...

前端利用html实现分页切换效果

前端利用html实现分页切换效果相关推荐

最新文章

热门文章

前端 利用html实现分页切换效果

前端 利用html实现分页切换效果相关推荐

最新文章

热门文章

前端利用html实现分页切换效果

前端利用html实现分页切换效果相关推荐