原生 js 写分页
2024-08-25 03:44:01
欢迎留言或者加本人QQ172360937咨询
这段代码是用原生 js 写的一个分页的效果
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{padding:0;margin:0;}
#ul{font-size:0;font-family:Microsoft YaHei;display:inline-block;}
#ul li{
-moz-user-select:none;/*火狐*/
-webkit-user-select:none;/*webkit浏览器*/
-ms-user-select:none;/*IE10*/
-khtml-user-select:none;/*早期浏览器*/
user-select:none;
list-style: none;float:left;padding:6px;font-size:13px;border:1px solid #ccc;margin:2px;cursor:pointer;color:#585858;} #div{width:100%;text-align: center;position:absolute;bottom:30px;}
#ul .background{background:#39C6F4;color:white;border:1px solid #39C6F4;}
</style>
</head>
<body>
<div id='div'>
<ul id='ul'>
<li>首页</li>
<li>上一页</li>
<li></li>
<li></li>
<li></li>
<li>下一页</li>
<li>尾页</li>
</ul>
</div>
<script>
var ul = document.getElementById('ul');
var li = ul.getElementsByTagName('li');
li[2].className = 'background';
var num01 = 1;
var num02 = 800/*总数*/;
//1 //首页的点击事件
li[li.length-li.length].onclick = function(){
Background(2);
num01 = 1;
content(num01);
}
//2 //尾页的点击事件
li[li.length-1].onclick = function(){
Background(li.length-3);
num01 = num02-(li.length-5);
content(num01)
}
//3 //上一页的点击事件
li[li.length-(li.length-1)].onclick = function(){ for(var j = 0;j<li.length-4;j++){
if(li[j+2].className == 'background' && li[j+2].innerHTML != 1){
if(j+2 != li.length-(li.length-2)){
Background(j+1);
}
break;
}
}
if(j+2 == li.length-(li.length-2)){
num01 -- ;
content(num01);
}
}
//4 下一页的点击事件
li[li.length-2].onclick = function(){
for(var j = 0;j<li.length;j++){
if(li[j].className == 'background' && li[j].innerHTML < num02){ //* && 写最后一页的总数*/
if(j+1 < li.length-2){
Background(j+1);
}
break;
}
}
if(j+1 == li.length-2){
num01++;
content(num01);
}
}
// 分页的点击事件
for(var i = 0;i<li.length-4;i++){
li[i+2].index = i+2;
li[i+2].onclick = function(){
Background(this.index);
}
}
//把所有的分页背景去掉，给指定的分页添加背景颜色
function Background(num){
for(var i = 0;i<li.length;i++){
li[i].className = li[i].className.replace('background','');
li[num].className = 'background';
}
}
// 给li 写内容
content(num01);
function content(number){
for(var i=0;i<li.length-4;i++){
li[i+2].innerHTML = number;
number++;
}
}
</script>
</body>
</html>
最新文章
- 如何设置文本文件的默认保存编码为UTF-8
- LocalBroadcastManager 使用小解
- Objective-C之类和对象
- iOS缓存框架－PINCache解读
- myeclipse 10创建maven项目
- 九度OJ 1024 畅通工程 -- 并查集、贪心算法(最小生成树)
- [转载]C#中获取时间戳（UnixTime）的方法
- delphi xe5 android sample
- Fragment与Activity
- WebApp模版并运行
- Angular 新手容易碰到的坑
- gitlab钩子搭建
- C#标准体重判断
- 图像的视差匹配（Stereo Matching）
- [Asp.net MVC]Asp.net MVC5系列——布局视图
- iOS 设置 UIWebView UserAgent
- Spark Sort-Based Shuffle具体实现内幕和源码详解
- url override implements session
- Windows10 桌面显示 我的电脑
- LNMP简要配置