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代码不再写上了。知道方法就行