先来看一下成品图：

 <!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的更多相关文章

  1. [PHP][学习笔记][CURL]监测设备运行情况小demo

    1.curl获取的web content 不能直接echo到页面,会造成js各种错误 2.想办法处理字符串的截取.拼接 2.1.裁剪html返回的字符串 function cutStringFrom( ...

  2. 模仿京东顶部搜索条效果制作的一个小demo

    最近模仿京东顶部搜索条效果制作的一个小demo,特贴到这里,今后如果有用到可以参考一下,代码如下 #define kScreenWidth [UIScreen mainScreen].bounds.s ...

  3. 入门Leaflet之小Demo

    入门Leaflet之小Demo 写在前面 ---- WebGIS开发基础之Leaflet GIS基本概念:GIS.Map.Layer.Feature.Geometry.Symbol.Data(Poin ...

  4. 新手 gulp+ seajs 小demo

    首先,不说废话,它的介绍和作者就不在多说了,网上一百度一大堆: 我在这里只是来写写我这2天抽空对seajs的了解并爬过的坑,和实现的一个小demo(纯属为了实现,高手请绕道); 一.环境工具及安装 1 ...

  5. 前端：jQuery笔记

    前端:jQuery笔记 此系列文章乃是学习jQuery的学习笔记. Asp.net MVC Comet推送 摘要: 一.简介 在Asp.net MVC实现的Comet推送的原理很简单. 服务器端:接收 ...

  6. Python全栈之jQuery笔记

    jQuery runnoob网址: http://www.runoob.com/jquery/jquery-tutorial.html jQuery API手册: http://www.runoob. ...

  7. 【Java】Jsoup爬虫,一个简单获取京东商品信息的小Demo

    简单记录 - Jsoup爬虫入门实战 数据问题?数据库获取,消息队列中获取中,都可以成为数据源,爬虫! 爬取数据:(获取请求返回的页面信息,筛选出我们想要的数据就可以了!) 我们经常需要分析HTML网 ...

  8. lucene.net 3.0.3、结合盘古分词进行搜索的小例子(转)

    lucene.net 3.0.3.结合盘古分词进行搜索的小例子(分页功能)   添加:2013-12-25 更新:2013-12-26 新增分页功能. 更新:2013-12-27 新增按分类查询功能, ...

  9. 一周一个小demo — 前端后台的交互实例

    这一周呢,本K在大神的指导下,完成了一个利用ajax与php文件上传处理相结合的一个留言板功能的小实例,下面就让本K来带大家瞅瞅如何实现这一种功能. 一.界面概览 首先我们来看一下这个小demo的具体 ...

随机推荐

  1. docker compose环境搭建

    概述 Docker Compose提供一个简单的基于YAML配置语言.用于描写叙述和组装多容器的分布式应用. 使用docker定义和执行复杂的应用.使用compose,能够在一个文件中,定义多容器的应 ...

  2. RecyclerViewDemo

    https://github.com/eltld/RecyclerViewDemo

  3. win10安装Anaconda+TensorFlow+配置PyCharm

    其实很简单,我这里也只是记录一下而已. 第一大坑:anaconda必须安装4.2以前的版本,不能安装4.3以后的 版本:满满的血泪史 因为我们需要安装自带的python必须是3.5,才可以调用Tens ...

  4. 1987年国际C语言混乱代码大赛获奖的一行代码

    macb() ? lpcbyu(&gbcq/_\021%ocq\012\0_=w(gbcq)/_dak._=}_ugb_[0q60)s+ 这是CoolShell博主之前做了一个非常有意思的在线 ...

  5. 《从零開始学Swift》学习笔记（Day 61）——Core Foundation框架之内存管理

    原创文章,欢迎转载. 转载请注明:关东升的博客 在Swift原生数据类型.Foundation框架数据类型和Core Foundation框架数据类型之间转换过程中,尽管是大部分是能够零开销桥接,零开 ...

  6. LiberOJ#6178. 「美团 CodeM 初赛 Round B」景区路线规划 概率DP

    题意 游乐园被描述成一张 n 个点,m 条边的无向图(无重边,无自环).每个点代表一个娱乐项目,第 i 个娱乐项目需要耗费 ci 分钟的时间,会让小 y 和妹子的开心度分别增加 h1i ,h2i ,他 ...

  7. Difference between exit() and sys.exit() in Python

    Difference between exit() and sys.exit() in Python - Stack Overflow https://stackoverflow.com/questi ...

  8. Java programming language compiler

    https://docs.oracle.com/javase/7/docs/technotes/tools/windows/javac.html\ javac - Java programming l ...

  9. 阿里Java编程规范 学习笔记

    @import url(http://i.cnblogs.com/Load.ashx?type=style&file=SyntaxHighlighter.css);@import url(/c ...

  10. LIS（最长上升子序列）的三种经典求法

    求最长上升子序列的三种经典方案: 给定一个长度为 \(N\) 的数列,求它数值单调递增的子序列长度最大为多少.即已知有数列 \(A\) , \(A=\{A_1,A_2....A_n\}\) ,求 \( ...