标签：style blog io ar color 使用 sp java for
应公司需求，有时需要制作静态页面网站，而一旦涉及到文章的分页，实现起来非常麻烦，自己又刚入门，对js不是很熟悉，所以就拿来练练手。
首先页面结构如下，分别展示数据跟分页：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 ol, ul { 8 list-style: none; 9 } 10 li { 11 float:left; 12 margin:0 10px; 13 } 14 ol li { 15 cursor:pointer; 16 padding:1px 5px; 17 background:#eee; 18 border:1px solid #ccc; 19 } 20 ol li.on { 21 background:#f00; 22 color:#fff; 23 border-color:#f00; 24 } 25 span { 26 color:#f00; 27 } 28 </style> 29 </head> 30 <body> 31 <ul id="data"> 32 <li> 33 <img src="1.jpg" alt="服饰 —— 服装模板" /> 34 <h2>服饰 —— 服装模板<span>NO.A001</span></h2> 35 </li> 36 <li> 37 <img src="1.jpg" alt="服饰 —— 服装模板" /> 38 <h2>服饰 —— 服装模板<span>NO.A001</span></h2> 39 </li> 40 </ul> 41 <div style="clear:both;"></div> 42 <ol id="page"> 43 <li>1</li> 44 <li>2</li> 45 </ol> 46 47 <script src="data.js"></script> 48 </body> 49 </html>
在data.js中创建一个数据，用于存储数据：
var dataList = [ { "_title": "服饰 —— 服装模板", "_no": "A001", "_url": "1.jpg" }, { "_title": "农业 —— 蔬菜模板", "_no": "A002", "_url": "2.jpg" }, { "_title": "汽车 —— 轮胎模板", "_no": "A003", "_url": "3.jpg" }, { "_title": "服饰 —— 服装模板", "_no": "A004", "_url": "1.jpg" }, { "_title": "农业 —— 蔬菜模板", "_no": "A005", "_url": "2.jpg" }, { "_title": "汽车 —— 轮胎模板", "_no": "A006", "_url": "3.jpg" }, { "_title": "服饰 —— 服装模板", "_no": "A007", "_url": "1.jpg" }, { "_title": "农业 —— 蔬菜模板", "_no": "A008", "_url": "2.jpg" }, { "_title": "汽车 —— 轮胎模板", "_no": "A009", "_url": "3.jpg" } ];
思路：创建一个对象，对象中设置三个方法：
1、分页导航按钮
2、页面数据展示
3、分页导航按钮点击事件
首先，创建构造函数，分别存储：页面的元素、数组数据、当前页及每页显示多少条数据：
1 // 获取id 2 function $$(id) { 3 return document.getElementById(id); 4 } 5 6 // 设置构造函数 7 function SetData() { 8 this.elCon = $$("data"); // 页面内容元素 9 this.elPage = $$("page"); // 分页导航元素 10 this.data = dataList; // 数据列表 11 this.i = 0; // 从第几条开始取数据(0代表第一条) 12 this.strNav = ""; // 存储分页导航选项 13 this.view = 2; // 默认一页显示多少 14 }
1、分页导航按钮： 创建原型方法，定义分页函数。先获取数据长度，之后除以每页显示多少条数据，再向上取整 得出分页导航，插入页面中：
// 设置原型方法 SetData.prototype = { constructor: SetData, // 指向构造函数 // 分页函数 setPageNav: function() { var len = this.data.length; for (var i = 0; i < Math.ceil(len/this.view); i++) { // 设置分页 this.strNav += "<li>"+(i+1)+"</li>"; } // 插入分页 this.elPage.innerHTML = this.strNav; this.elPage.getElementsByTagName("li")[0].className = "on"; } };
2、页面数据展示：取得当前页面加上每页显示条数，得出从哪开始取。 然后循环取出对应数据，加入strHTML变量中，再插入页面
1 // 页面数据 2 setPageData: function() { 3 var num = this.i+this.view, 4 // 如果超过长度，则获取最后的长度 5 len = (num < this.data.length) ? num : this.data.length, 6 strHTML = ""; // 初始化,用于存储内容 7 // 遍历获取数据并设置当前页面内容 8 for (this.i; this.i < len; this.i++) { 9 var _url = this.data[this.i]._url, 10 _no = this.data[this.i]._no, 11 _title = this.data[this.i]._title; 12 // 设置对应的属性及内容 13 strHTML += "<li>"+ 14 "<img src="+_url+" alt="+_title+" title="+_title+" />"+ 15 "<h2>"+_title+"<span>NO."+_no+"</span></h2>"+ 16 "</li>\r\n"; 17 } 18 this.elCon.innerHTML = strHTML; 19 }
3、分页导航按钮点击事件：获取分页按钮，循环绑定事件并在点击时设置当前所在位置 "_self.i = cur * _self.view" , 之后调用页面数据函数，使其重新获取数据
1 // 设置分页按钮 2 setBtn: function() { 3 // 获取分页按钮 4 var li = this.elPage.getElementsByTagName("li"), 5 len = li.length, 6 _self = this; // 保存对象 7 // 遍历并绑定按钮事件 8 for (var i = 0; i < len; i++) { 9 // 闭包绑定 10 (function(cur) { 11 li[cur].onclick = function() { 12 // 移除存在当前类的样式 13 for (var j = 0; j < len; j++) { 14 // 使用className 为了兼容IE7以下 15 if (li[j].getAttribute("class") == "on" || li[j].getAttribute("className") == "on") { 16 li[j].className = ""; 17 break; // 退出循环 18 } 19 } 20 li[cur].className = "on"; // 设置当前位置 21 _self.i = cur * _self.view; // 设置当前页 22 _self.setPageData(); // 调用获取内容行数 23 } 24 })(i); 25 } 26 }
定义方法之后，实例化对象并调用对应方法往页面插入数据，所有代码如下：
1 var dataList = [ 2 { 3 "_title": "服饰 —— 服装模板", 4 "_no": "A001", 5 "_url": "1.jpg" 6 }, 7 { 8 "_title": "农业 —— 蔬菜模板", 9 "_no": "A002", 10 "_url": "2.jpg" 11 }, 12 { 13 "_title": "汽车 —— 轮胎模板", 14 "_no": "A003", 15 "_url": "3.jpg" 16 }, 17 { 18 "_title": "服饰 —— 服装模板", 19 "_no": "A004", 20 "_url": "1.jpg" 21 }, 22 { 23 "_title": "农业 —— 蔬菜模板", 24 "_no": "A005", 25 "_url": "2.jpg" 26 }, 27 { 28 "_title": "汽车 —— 轮胎模板", 29 "_no": "A006", 30 "_url": "3.jpg" 31 }, 32 { 33 "_title": "服饰 —— 服装模板", 34 "_no": "A007", 35 "_url": "1.jpg" 36 }, 37 { 38 "_title": "农业 —— 蔬菜模板", 39 "_no": "A008", 40 "_url": "2.jpg" 41 }, 42 { 43 "_title": "汽车 —— 轮胎模板", 44 "_no": "A009", 45 "_url": "3.jpg" 46 } 47 ]; 48 49 50 // 获取id 51 function $$(id) { 52 return document.getElementById(id); 53 } 54 55 // 设置构造函数 56 function SetData() { 57 this.elCon = $$("data"); // 页面内容元素 58 this.elPage = $$("page"); // 分页导航元素 59 this.data = dataList; // 数据列表 60 this.i = 0; // 从第几条开始取数据(0代表第一条) 61 this.strNav = ""; // 存储分页导航选项 62 this.view = 2; // 默认一页显示多少 63 } 64 // 设置原型方法 65 SetData.prototype = { 66 constructor: SetData, // 指向构造函数 67 // 分页函数 68 setPageNav: function() { 69 var len = this.data.length; 70 for (var i = 0; i < Math.ceil(len/this.view); i++) { 71 // 设置分页 72 this.strNav += "<li>"+(i+1)+"</li>"; 73 } 74 // 插入分页 75 this.elPage.innerHTML = this.strNav; 76 this.elPage.getElementsByTagName("li")[0].className = "on"; 77 }, 78 // 页面数据 79 setPageData: function() { 80 var num = this.i+this.view, 81 // 如果超过长度，则获取最后的长度 82 len = (num < this.data.length) ? num : this.data.length, 83 strHTML = ""; // 初始化,用于存储内容 84 // 遍历获取数据并设置当前页面内容 85 for (this.i; this.i < len; this.i++) { 86 var _url = this.data[this.i]._url, 87 _no = this.data[this.i]._no, 88 _title = this.data[this.i]._title; 89 // 设置对应的属性及内容 90 strHTML += "<li>"+ 91 "<img src="+_url+" alt="+_title+" title="+_title+" />"+ 92 "<h2>"+_title+"<span>NO."+_no+"</span></h2>"+ 93 "</li>\r\n"; 94 } 95 this.elCon.innerHTML = strHTML; 96 }, 97 // 设置分页按钮 98 setBtn: function() { 99 // 获取分页按钮 100 var li = this.elPage.getElementsByTagName("li"), 101 len = li.length, 102 _self = this; // 保存对象 103 // 遍历并绑定按钮事件 104 for (var i = 0; i < len; i++) { 105 // 闭包绑定 106 (function(cur) { 107 li[cur].onclick = function() { 108 // 移除存在当前类的样式 109 for (var j = 0; j < len; j++) { 110 // 使用className 为了兼容IE7以下 111 if (li[j].getAttribute("class") == "on" || li[j].getAttribute("className") == "on") { 112 li[j].className = ""; 113 break; // 退出循环 114 } 115 } 116 li[cur].className = "on"; // 设置当前位置 117 _self.i = cur * _self.view; // 设置当前页 118 _self.setPageData(); // 调用获取内容行数 119 } 120 })(i); 121 } 122 } 123 }; 124 125 // 初始化对象 126 var setData = new SetData(); 127 setData.setPageNav(); // 设置分页导航 128 setData.setPageData(); // 设置分页内容 129 setData.setBtn(); // 设置分页按钮
总结： 刚入门js，实现这个功能从中也学习了一些知识，技术需要不断的积累练习与总结，希望大神对以上代码给予指导！
标签：style blog io ar color 使用 sp java for
原文地址：http://www.cnblogs.com/morong/p/4123671.html
