HTML代码 !doctype htmlhtml lang="en"head meta charset="UTF-8" titleDocument/title/headstyle * { margin: 0 ; padding: 0 ; list -style- type: none; } .pagWarp{ height: 40px; box -shadow: 0 2px 5px #b6b6b6; position: absolute; border - radiu
HTML代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
*{
margin: 0 ;
padding: 0;
list-style-type: none;
}
.pagWarp{
height: 40px;
box-shadow: 0 2px 5px #b6b6b6;
position: absolute;
border-radius: 2px;
right: 42%;
top: 430px;
}
#btnL,#btnR{
line-height: 40px;
cursor: pointer;
}
#btnL{
float: left;
}
#btnR{
float: right;
}
.pagWarp ul{
height: 40px;
margin: 0 auto;
float: left;
text-align: center;
padding-left: 40px;
padding-right: 40px;
}
.pagWarp ul li{
float: left;
text-align: center;
line-height: 40px;
padding: 0 4px;
}
.active{
color: blue;
font-size: 30px;
}
/* 商品列表样式 */
.list{
width: 80%;
margin: 20px auto;
}
.list:after{
content:‘‘;
display: block;
clear: both;
}
.list li{
padding:2%;
width: 15%;
float: left;
height: 300px;
color: #666;
border-right: 1px solid #b6b6b6;
box-shadow: 2px 2px 5px #b6b6b6;
margin-left: 8px;
margin-top: 20px;
}
.list li h2{
font-size: 18px;
text-align: center;
line-height: 30px;
}
.list .img{
width: 100%;
border: 1px solid #b6b6b6;
height: 180px;
}
.list input[type=button]{
display: block;
margin: 0 auto;
border: 1px solid #b6b6b6;
width: 100px;
height: 80px;
}
</style>
<body>
<ul class="list" id="list">
</ul>
<div class="pagWarp" id="pageWarp">
<li id="btnL">上一页</li>
<ul>
</ul>
<li id="btnR">下一页</li>
</div>
</body>
<script src="ajax.js"></script>
<script src="index.js"></script>
</html>
index.js
; (function(){ "use strict"; class Page{ constructor(){ this.url="http://localhost/1908/page/goods.json", this.cont=document.getElementById(‘list‘), this.pageCont=document.querySelector(‘#pageWarp ul‘), this.left=document.getElementById("btnL"), this.right=document.getElementById("btnR"), this.num=5, this.index=0 // 1.开启ajax，请求数据 this.load(); // 4.绑定点击事件 this.addEvent(); } addEvent(){ var that = this; // 5.事件被触发时，改变索引（页码） this.left.onclick = function(){ that.changeIndex(-1) } this.right.onclick = function(){ that.changeIndex(1) } } changeIndex(type){ // 计算页码 if(type == -1){ if(this.index == 0){ this.index = this.maxNum-1; }else{ this.index--; } }else{ if(this.index == this.maxNum-1){ this.index = 0; }else{ this.index++; } } // 渲染样式 this.active(); // 6.修改页面数据 this.display(); } load(){ ajax({ url:this.url, success:res=>{ // 2.请求数据成功，解析数据，准备渲染页面 this.res = JSON.parse(res); // 3.创建页码 this.createPage(); this.display(); } }) } createPage(){ // 计算最大页码数 this.maxNum = Math.ceil(this.res.length / this.num) // 生成页码的结构 var str = ""; for(var i=0;i<this.maxNum;i++){ str += `<li>${i+1}</li>`; } this.pageCont.innerHTML = str; this.active();//让默认的index有样式。 } active(){ // 设置当前项的功能 for(var i=0;i<this.maxNum;i++){ this.pageCont.children[i].className = ""; } this.pageCont.children[this.index].className = "active"; } display(){ var str = ""; // 分页的核心部分： // 一页数据有限，不能够从0到length-1了 // 0~5 this.num5*this.index0 ~ this.num5*(this.index0+1) // 5~10 this.num5*this.index1 ~ this.num5*(this.index1+1) // 10~15 this.num5*this.index2 ~ this.num5*(this.index2+1) for(var i=this.num*this.index;i<this.num*(this.index+1);i++){ if(i<this.res.length){ str += `<li> <img src="${this.res[i].url}" class="img"> <h2>商品名称:<span>${this.res[i].name}</span></h2> <h2>商品介绍:<span>${this.res[i].tip}</span></h2> <h2>商品价格:<span>${this.res[i].price}</span></h2> </li>`; } } this.cont.innerHTML = str; } } new Page; // window.page = Page; })();
另一种方法写：html(可以适应不同情况调用) .这个用了return方法
html：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
*{
margin: 0 ;
padding: 0;
list-style-type: none;
}
.pagWarp{
height: 40px;
box-shadow: 0 2px 5px #b6b6b6;
position: absolute;
border-radius: 2px;
right: 42%;
top: 430px;
}
#btnL,#btnR{
line-height: 40px;
cursor: pointer;
}
#btnL{
float: left;
}
#btnR{
float: right;
}
.pagWarp ul{
height: 40px;
margin: 0 auto;
float: left;
text-align: center;
padding-left: 40px;
padding-right: 40px;
}
.pagWarp ul li{
float: left;
text-align: center;
line-height: 40px;
padding: 0 4px;
}
.active{
color: blue;
font-size: 30px;
}
/* 商品列表样式 */
.list{
width: 80%;
margin: 20px auto;
}
.list:after{
content:‘‘;
display: block;
clear: both;
}
.list li{
padding:2%;
width: 15%;
float: left;
height: 300px;
color: #666;
border-right: 1px solid #b6b6b6;
box-shadow: 2px 2px 5px #b6b6b6;
margin-left: 8px;
margin-top: 20px;
}
.list li h2{
font-size: 18px;
text-align: center;
line-height: 30px;
}
.list .img{
width: 100%;
border: 1px solid #b6b6b6;
height: 180px;
}
.list input[type=button]{
display: block;
margin: 0 auto;
border: 1px solid #b6b6b6;
width: 100px;
height: 80px;
}
</style>
<body>
<ul class="list" id="list">
</ul>
<div class="pagWarp" id="pageWarp">
<li id="btnL">上一页</li>
<ul>
</ul>
<li id="btnR">下一页</li>
</div>
</body>
<script src="../ajax.js"></script>
<script src="index.js"></script>
<script>
new page({
url:"http://localhost/1908/page/goods.json",
cont:document.getElementById(‘list‘),
pageCont:document.querySelector(‘#pageWarp ul‘),
left:document.getElementById("btnL"),
right:document.getElementById("btnR"),
num:5,
index:0
});
</script>
</html>
index.js
;var page = (function(){ "use strict"; class Page{ constructor(options){ this.url = options.url; this.cont = options.cont; this.pageCont = options.pageCont; this.left = options.left; this.right = options.right; this.num = options.num; this.index = options.index; // 1.开启ajax，请求数据 this.load(); // 4.绑定点击事件 this.addEvent(); } addEvent(){ var that = this; // 5.事件被触发时，改变索引（页码） this.left.onclick = function(){ that.changeIndex(-1) } this.right.onclick = function(){ that.changeIndex(1) } } changeIndex(type){ // 计算页码 if(type == -1){ if(this.index == 0){ this.index = this.maxNum-1; }else{ this.index--; } }else{ if(this.index == this.maxNum-1){ this.index = 0; }else{ this.index++; } } // 渲染样式 this.active(); // 6.修改页面数据 this.display(); } load(){ ajax({ url:this.url, success:res=>{ // 2.请求数据成功，解析数据，准备渲染页面 this.res = JSON.parse(res); // 3.创建页码 this.createPage(); this.display(); } }) } createPage(){ // 计算最大页码数 this.maxNum = Math.ceil(this.res.length / this.num) // 生成页码的结构 var str = ""; for(var i=0;i<this.maxNum;i++){ str += `<li>${i+1}</li>`; } this.pageCont.innerHTML = str; // 设置默认当前项 this.active(); } active(){ // 设置当前项的功能 for(var i=0;i<this.pageCont.children.length;i++){ this.pageCont.children[i].className = ""; } this.pageCont.children[this.index].className = "active"; } display(){ var str = ""; // 分页的核心部分： // 一页数据有限，不能够从0到length-1了 // 0~5 this.num5*this.index0 ~ this.num5*(this.index0+1) // 5~10 this.num5*this.index1 ~ this.num5*(this.index1+1) // 10~15 this.num5*this.index2 ~ this.num5*(this.index2+1) for(var i=this.num*this.index;i<this.num*(this.index+1);i++){ if(i<this.res.length){ str += `<li> <img src="${this.res[i].url}" class="img"> <h2>商品名称:<span>${this.res[i].name}</span></h2> <h2>商品介绍:<span>${this.res[i].tip}</span></h2> <h2>商品价格:<span>${this.res[i].price}</span></h2> </li>`; } } this.cont.innerHTML = str; } } return Page; // window.page = Page; })();
ajax封装代码，json代码不再写上了。知道方法就行