任经理++徐州网站建设,怎么自己写网页,楚雄网站建设公司,做网站的团队组件用惯了#xff0c;突然叫你用纯cssJavaScript写一个分页#xff0c;顿时就慌了。久久没有接触js了#xff0c;不知道咋写了。本文章也是借与参考做的一个demo案例#xff0c;小白看了都会的那种。咱们就以ul列表为例进行分页#xff1a; 首先模拟的数据列表是这样的突然叫你用纯cssJavaScript写一个分页顿时就慌了。久久没有接触js了不知道咋写了。本文章也是借与参考做的一个demo案例小白看了都会的那种。咱们就以ul列表为例进行分页 首先模拟的数据列表是这样的默认有8条数据
div classexampleul idlistli这是list1/lili这是list2/lili这是list3/lili这是list4/lili这是list5/lili这是list6/lili这是list7/lili这是list8/li/ulul idpage/ul
/div第一步修改一下样式一条li标签假如有40px的高度现在有8个则整个ul有320px我现在需要进行一个页面显示5条数据我们就给ul标签调整一下样式
#list {width:400px;height:200px;margin:10px auto;border:1px solid #ccc;overflow:hidden;
}固定高度将5条数据显示出来200px溢出的li将进行隐藏,就会显示这样 第二步.使用js操作将页面的标签进行获取进行后面的处理 var pageList document.getElementById(list);var pageLi pageList.getElementsByTagName(li);var pageBtn document.getElementById(page);定义分页并计算页面数量 上方获li获取标签为8这里是一个页面显示5条数据所以对pageLi进行取模为0则是Math.floor不是则是Math.ceilMath.floor是向下取整 1.6 1Math.ceil为向上取整1.62 所以这里n最后等于2页面为2。 var n 0;//定义分页if (pageLi.length % 5 0) {//计算页数n Math.floor(pageLi.length / 5);//向下取整 1.6 1} else {n Math.ceil(pageLi.length / 5);//向上取整 1.62 }第三步页面数量得到了就要创建分页标签因为html只有一个ul标签 我们要将li进行动态生成 for (var i 1; i n; i) {pageli2 document.createElement(li); //创建li元素pageli2.style.cssText width:30px;height:30px;background:pink;margin:0 5px;display: inline-block;text-align:center;line-height:30px;color:white;//元素样式pageli2.innerHTML i; //页面数显示在li标签里pageBtn.appendChild(cLi); //将li加入到ul下}然后获取分页li进行样式设置 var aLi pageBtn.getElementsByTagName(li); for (var i 0; i n - 1; i) {aLi[i].index i; //下标aLi[0].style.background pink; //样式aLi[i].style.left i * 40 px; //偏移 位置此时就会出现分页 第四步对分页两个li做点击事件进行分页显示 aLi[i].onclick function() {pageIndex this.index; //获取下标for (var j 0; j aLi.length; j) {aLi[j].style.background pink; //未选中样式}this.style.background blue; //选中样式//3.页面切换for (var j 0; j pageLi.length; j) {pageLi[j].style.display none; //点击第pageIndex页时让所有页面隐藏}for (var j (pageIndex * 5); j (pageIndex 1) * 5; j) {//例如pageIndex为0时则j0j5;就会将1到5的数据显示出来以此类推pageLi[j].style.display block;}}看看最终效果为 完整代码
!doctype html
html
head
meta charsetutf-8
title使用JavaScript实现列表分页/title
style
* {margin:0;padding:0;
}
img {border:0;
}
ol,ul,li {list-style:none;
}
.example {width:100%;height:500px;position:relative;
}
#list {width:400px;height:200px;margin:10px auto;border:1px solid #ccc;overflow:hidden;
}
#list li {width:100%;height:40px;line-height: 40px;font-weight: bold;text-align: center;border-bottom:1px solid #666;
}
#page {width:400px;height:30px;margin:0 auto;border:1px solid #ccc;padding:5px 0;position:relative;overflow:hidden;
}
/style
/head
body
div classexampleul idlistli这是list1/lili这是list2/lili这是list3/lili这是list4/lili这是list5/lili这是list6/lili这是list7/lili这是list8/li/ulul idpage/ul
/divscript
window.onload function() {var pageList document.getElementById(list);var pageLi pageList.getElementsByTagName(li);var pageBtn document.getElementById(page);var n 0;//定义分页if (pageLi.length % 5 0) {//计算页数n Math.floor(pageLi.length / 5);//向下取整 1.6 1} else {n Math.ceil(pageLi.length / 5);//向上取整 1.62 }//添加页码for (var i 1; i n; i) {pageli2 document.createElement(li);pageli2.style.cssText width:30px;height:30px;background:pink;margin:0 5px;display: inline-block;text-align:center;line-height:30px;color:white;pageli2.innerHTML i;pageBtn.appendChild(pageli2);}var aLi pageBtn.getElementsByTagName(li);for (var i 0; i n - 1; i) {aLi[i].index i;aLi[0].style.background pink;aLi[i].style.left i * 40 px;// alert(aLi[i].index)aLi[i].onclick function() {pageIndex this.index;for (var j 0; j aLi.length; j) {aLi[j].style.background pink;}this.style.background blue;//3.页面切换for (var j 0; j pageLi.length; j) {pageLi[j].style.display none;}for (var j (pageIndex * 5); j (pageIndex 1) * 5; j) {pageLi[j].style.display block;}}}
}
/script
/body
/html本教程参与于JSCSS实现分页的两个方法
