jQuery笔记之热点搜索排名小demo

先来看一下成品图：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>Document</title>

     <style>

     *{

         margin: 0px;

         padding:0px;

         list-style: none;

     }

     .tpl{

         display: none;

     }

     .clearF::after{

         content:'';

         display: block;

         clear: both;

         overflow: hidden;

     }

     .wrapper{

         border:1px solid #ccc;

         padding: 10px 5px;

         width:350px;

         margin: 100px auto 0px;

     }

     .wrapper .headSection{

         margin-bottom: 10px;

     }

     .wrapper .headSection .hot{

         font-size: 18px;

         font-weight: bold;

         float: left;

     }

     .wrapper .headSection .change{

         float: right;

         color:#08f;

         cursor: pointer;

     }

     .wrapper .showSection .number{

         color:#fff;

         background:#0bf;

         width:20px;

         height:20px;

         text-align: center;

         display: inline-block;

     }

     .wrapper .showSection li{

         padding: 5px 0;

         border-bottom:1px solid #ccc;

     }

     .wrapper .showSection .mes{

         float: right;

     }

     .wrapper .showSection .mes::after{

         content:'';

         display: inline-block;

         width:12px;

         height: 12px;;

         background-size: 100% 100%;

     }

     .wrapper .showSection .mes.up::after{

         background-image:url('../ing/热点搜索UP.PNG');

     }

     .wrapper .showSection .mes.down::after{

         background-image:url('../ing/热点搜索down.PNG');

     }

     </style>

 </head>

 <body>

     <div class="wrapper">

         <div class="headSection clearF">

             <span class="hot">搜索热点</span>

             <span class="change">换一换</span>

         </div>

         <ul class="showSection">

             <li class="tpl clearF">

                 <span class="number">1</span>

                 <span class="title">金星</span>

                 <span class="mes">3344</span>

             </li>

         </ul>

     </div>

     <script src="../jq/jquery-3.3.1/jquery-3.3.1.js"></script>

     <script src="../jq/serverData.js"></script>

     <!-- 引入jq文件，还有服务器数据文件 -->

     <script>

         (function(data){

             var $wrapper = $('.wrapper');

             var $showSection = $wrapper.find('.showSection');

             var colorsArray = ['#f54545', '#ff8547', '#ffac38'];

             var curPage = 0; //代表页数

             var totalPage = Math.ceil( (data.length / 10) );

             //1 + curpage * 10 1

             //1 + curpage * 10 11

             $showSection.hide(); //在渲染之前先把结构隐藏起来

             function bindEvent(){

                 $wrapper.find('.change').on('click',function(){

                     curPage = ++curPage % totalPage;

                     renderPage(data);

                 });

             }

             function renderPage(data){

                 //清空前一页内容

                 $showSection.hide().find('.showItem').remove();

                 //根据数据渲染页面

                 //

                 //10 20 30 40 50 60 70

                 var len = (data.length - curPage * 10) >= 10 ? 10 : data.length - curPage * 10; //需要被渲染的长度

                         //数据的长度减去当前页数乘以10(一个页面显示10条数据),是否大于等于10?如果大于等于10则长度为10，否则等于本身

                         //  数据长度为70   比如说当前页数为第三页，也就是索引2，2 * 10 = 20，70 - 20 = 50，大于10。所以返回10

                 //控制每一页应该渲染多少条数据

                 for(var i = 0; i < len; i++){

                     var $Clone = $wrapper.find('.tpl').clone().removeClass('tpl').addClass('showItem');

                     //把tpl身上的结构克隆到clone身上,然后再帮自己换个类名，为了不让上面的css起到作用

                     var ele = data[i + curPage * 10];

                     //ele == 数据的第几条。i + curPage * 10

                     //循环第一圈的i为0，页数为0， 0 + 0 * 10 = 0;  第一页刚好从第1条数据开始拿

                     //循环第二圈的i为0，页数为1,  0 + 1 * 10 = 11;  第二页刚好从第11条数据开始拿

                     $Clone.children('span').eq(0)

                         .text(i + curPage * 10 + 1)

                             .css('backgroundColor',curPage == 0 && colorsArray[i + curPage])

                                 .next()

                                     .text(ele.title)

                                         .next()

                                             .text(ele.search)

                                                     .addClass(ele.search > ele.hisSearch ? 'up' : 'down');

                     $showSection.append($Clone);

                 }

                 $showSection.fadeIn();//展示渲染的时候加上淡出淡入的效果

             }

             bindEvent();

             renderPage(data);

         })(data);

     </script>

 </body>

 </html>

服务器数据文件：

serverData.jq

 var data = [

     {title:'金星秀停播', search:47754, hisSearch:42884},

     {title:'8岁孩独自吃火锅', search:46731, hisSearch:41076},

     {title:'父亲开车撞死儿子', search:44950, hisSearch:47232},

     {title:'国足战胜乌兹别克', search:24954, hisSearch:23492},

     {title:'中国研发高速列车', search:11334, hisSearch:39224},

     {title:'狐狸被养成怪物', search:6134, hisSearch:4282},

     {title:'杨坤被骚扰发飙', search:5207, hisSearch:4342},

     {title:'陈冠希怒怼女主持', search:5204, hisSearch:9831},

     {title:'王俊凯室友曝光', search:4921, hisSearch:2832},

     {title:'中国海军击溃海盗', search:4351, hisSearch:8271},

     {title:'美团再遭举报', search:4293, hisSearch:9824},

     {title:'德国现巨型炸弹', search:2985, hisSearch:6823},

     {title:'七旬老太欠款8亿', search:2150, hisSearch:8901},

     {title:'南京现快递毒包裹', search:1929, hisSearch:1092},

     {title:'付辛博现身民政局', search:1791, hisSearch:1921},

     {title:'客人换衣被直播', search:1691, hisSearch:1428},

     {title:'北京现共享男友', search:1535, hisSearch:1021},

     {title:'彩色兵马俑展出', search:1417, hisSearch:1092},

     {title:'怕被盗携巨款旅游', search:1322, hisSearch:1921},

     {title:'何雯娜退役', search:1220, hisSearch:1901},

     {title:'指示孩子闹机场', search:1056, hisSearch:1026},

     {title:'一批新规9月实施', search:931, hisSearch:428},

     {title:'霍元甲玄孙女夺冠', search:850, hisSearch:987},

     {title:'姚刚被立案侦查', search:784, hisSearch:887},

     {title:'泰方全面搜捕英拉', search:682, hisSearch:287},

     {title:'中国游客泰国遭砍', search:601, hisSearch:427},

     {title:'秦俊杰获杨紫祝福', search:595, hisSearch:465},

     {title:'台军演练用日军歌', search:525, hisSearch:799},

     {title:'印度医院儿童死亡', search:501, hisSearch:987},

     {title:'周杰伦开社交账号', search:468, hisSearch:989},

     {title:'秦俊杰获杨紫祝福', search:595, hisSearch:465},

     {title:'台军演练用日军歌', search:525, hisSearch:799},

     {title:'印度医院儿童死亡', search:501, hisSearch:987},

     {title:'周杰伦开社交账号', search:468, hisSearch:989}

 ];

巴特西

jQuery笔记之热点搜索排名小demo

最新文章

热门文章