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}" alt="" 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}" alt="" 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代码不再写上了。知道方法就行
长风破浪会有时，直挂云帆济沧海