先来看一下成品图：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <style> 9 *{ 10 margin: 0px; 11 padding:0px; 12 list-style: none; 13 } 14 .tpl{ 15 display: none; 16 } 17 .clearF::after{ 18 content:''; 19 display: block; 20 clear: both; 21 overflow: hidden; 22 } 23 .wrapper{ 24 border:1px solid #ccc; 25 padding: 10px 5px; 26 width:350px; 27 margin: 100px auto 0px; 28 } 29 .wrapper .headSection{ 30 margin-bottom: 10px; 31 } 32 .wrapper .headSection .hot{ 33 font-size: 18px; 34 font-weight: bold; 35 float: left; 36 } 37 .wrapper .headSection .change{ 38 float: right; 39 color:#08f; 40 cursor: pointer; 41 } 42 .wrapper .showSection .number{ 43 color:#fff; 44 background:#0bf; 45 width:20px; 46 height:20px; 47 text-align: center; 48 display: inline-block; 49 } 50 .wrapper .showSection li{ 51 padding: 5px 0; 52 border-bottom:1px solid #ccc; 53 } 54 .wrapper .showSection .mes{ 55 float: right; 56 } 57 .wrapper .showSection .mes::after{ 58 content:''; 59 display: inline-block; 60 width:12px; 61 height: 12px;; 62 background-size: 100% 100%; 63 } 64 .wrapper .showSection .mes.up::after{ 65 background-image:url('../ing/热点搜索UP.PNG'); 66 } 67 .wrapper .showSection .mes.down::after{ 68 background-image:url('../ing/热点搜索down.PNG'); 69 } 70 </style> 71 </head> 72 <body> 73 <div class="wrapper"> 74 <div class="headSection clearF"> 75 <span class="hot">搜索热点</span> 76 <span class="change">换一换</span> 77 </div> 78 <ul class="showSection"> 79 <li class="tpl clearF"> 80 <span class="number">1</span> 81 <span class="title">金星</span> 82 <span class="mes">3344</span> 83 </li> 84 </ul> 85 </div> 86 <script src="../jq/jquery-3.3.1/jquery-3.3.1.js"></script> 87 <script src="../jq/serverData.js"></script> 88 <!-- 引入jq文件，还有服务器数据文件 --> 89 <script> 90 (function(data){ 91 var $wrapper = $('.wrapper'); 92 var $showSection = $wrapper.find('.showSection'); 93 var colorsArray = ['#f54545', '#ff8547', '#ffac38']; 94 95 var curPage = 0; //代表页数 96 var totalPage = Math.ceil( (data.length / 10) ); 97 //1 + curpage * 10 1 98 //1 + curpage * 10 11 99 $showSection.hide(); //在渲染之前先把结构隐藏起来 100 101 function bindEvent(){ 102 $wrapper.find('.change').on('click',function(){ 103 curPage = ++curPage % totalPage; 104 105 renderPage(data); 106 }); 107 } 108 109 110 111 112 function renderPage(data){ 113 //清空前一页内容 114 $showSection.hide().find('.showItem').remove(); 115 116 //根据数据渲染页面 117 //70 118 //10 20 30 40 50 60 70 119 var len = (data.length - curPage * 10) >= 10 ? 10 : data.length - curPage * 10; //需要被渲染的长度 120 //数据的长度减去当前页数乘以10(一个页面显示10条数据),是否大于等于10?如果大于等于10则长度为10，否则等于本身 121 // 数据长度为70 比如说当前页数为第三页，也就是索引2，2 * 10 = 20，70 - 20 = 50，大于10。所以返回10 122 123 //控制每一页应该渲染多少条数据 124 for(var i = 0; i < len; i++){ 125 var $Clone = $wrapper.find('.tpl').clone().removeClass('tpl').addClass('showItem'); 126 //把tpl身上的结构克隆到clone身上,然后再帮自己换个类名，为了不让上面的css起到作用 127 128 var ele = data[i + curPage * 10]; 129 //ele == 数据的第几条。i + curPage * 10 130 //循环第一圈的i为0，页数为0， 0 + 0 * 10 = 0; 第一页刚好从第1条数据开始拿 131 //循环第二圈的i为0，页数为1, 0 + 1 * 10 = 11; 第二页刚好从第11条数据开始拿 132 133 $Clone.children('span').eq(0) 134 .text(i + curPage * 10 + 1) 135 .css('backgroundColor',curPage == 0 && colorsArray[i + curPage]) 136 .next() 137 .text(ele.title) 138 .next() 139 .text(ele.search) 140 .addClass(ele.search > ele.hisSearch ? 'up' : 'down'); 141 $showSection.append($Clone); 142 } 143 $showSection.fadeIn();//展示渲染的时候加上淡出淡入的效果 144 } 145 bindEvent(); 146 renderPage(data); 147 })(data); 148 </script> 149 </body> 150 </html>
服务器数据文件：
serverData.jq
1 var data = [ 2 {title:'金星秀停播', search:47754, hisSearch:42884}, 3 {title:'8岁孩独自吃火锅', search:46731, hisSearch:41076}, 4 {title:'父亲开车撞死儿子', search:44950, hisSearch:47232}, 5 {title:'国足战胜乌兹别克', search:24954, hisSearch:23492}, 6 {title:'中国研发高速列车', search:11334, hisSearch:39224}, 7 {title:'狐狸被养成怪物', search:6134, hisSearch:4282}, 8 {title:'杨坤被骚扰发飙', search:5207, hisSearch:4342}, 9 {title:'陈冠希怒怼女主持', search:5204, hisSearch:9831}, 10 {title:'王俊凯室友曝光', search:4921, hisSearch:2832}, 11 {title:'中国海军击溃海盗', search:4351, hisSearch:8271}, 12 {title:'美团再遭举报', search:4293, hisSearch:9824}, 13 {title:'德国现巨型炸弹', search:2985, hisSearch:6823}, 14 {title:'七旬老太欠款8亿', search:2150, hisSearch:8901}, 15 {title:'南京现快递毒包裹', search:1929, hisSearch:1092}, 16 {title:'付辛博现身民政局', search:1791, hisSearch:1921}, 17 {title:'客人换衣被直播', search:1691, hisSearch:1428}, 18 {title:'北京现共享男友', search:1535, hisSearch:1021}, 19 {title:'彩色兵马俑展出', search:1417, hisSearch:1092}, 20 {title:'怕被盗携巨款旅游', search:1322, hisSearch:1921}, 21 {title:'何雯娜退役', search:1220, hisSearch:1901}, 22 {title:'指示孩子闹机场', search:1056, hisSearch:1026}, 23 {title:'一批新规9月实施', search:931, hisSearch:428}, 24 {title:'霍元甲玄孙女夺冠', search:850, hisSearch:987}, 25 {title:'姚刚被立案侦查', search:784, hisSearch:887}, 26 {title:'泰方全面搜捕英拉', search:682, hisSearch:287}, 27 {title:'中国游客泰国遭砍', search:601, hisSearch:427}, 28 {title:'秦俊杰获杨紫祝福', search:595, hisSearch:465}, 29 {title:'台军演练用日军歌', search:525, hisSearch:799}, 30 {title:'印度医院儿童死亡', search:501, hisSearch:987}, 31 {title:'周杰伦开社交账号', search:468, hisSearch:989}, 32 {title:'秦俊杰获杨紫祝福', search:595, hisSearch:465}, 33 {title:'台军演练用日军歌', search:525, hisSearch:799}, 34 {title:'印度医院儿童死亡', search:501, hisSearch:987}, 35 {title:'周杰伦开社交账号', search:468, hisSearch:989} 36 ];