先来看一下成品图：

 <!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. 【转载】5种网络IO模型

    同步(synchronous) IO和异步(asynchronous) IO,阻塞(blocking) IO和非阻塞(non-blocking)IO分别是什么,到底有什么区别?这个问题其实不同的人给出 ...

  2. 【BZOJ】1007 水平可见直线

    [分析] 维护一个下凸包. 首先依照斜率来从小到大排序. 考虑斜率同样的,肯定仅仅能选截距大的,把截距小的给筛掉. 然后用栈来维护下凸包.先压入前两条直线. 然后对于每一条直线i,设栈中上一条直线p= ...

  3. java里类方法和实例方法

    实例方法相对于静态方法(或者叫类方法)而言没有 static 前缀类般方法被对象拥有(也称之实例方法原因)特点定义时候前面没有 static 前缀本类直接调用时候必须也实例方法内否则调用前必须先实例出 ...

  4. strong and weak 强引用和弱引用的差别

    (weak和strong)不同的是 当一个对象不再有strong类型的指针指向它的时候 它会被释放  ,即使还有weak型指针指向它. 一旦最后一个strong型指针离去 .这个对象将被释放,全部剩余 ...

  5. 微信公众号菜单与应用交互session

    http://www.cnblogs.com/yank/p/3476874.html http://blog.csdn.net/zmhawk/article/details/43671195 http ...

  6. 内核添加dts后，device和device_driver的match匹配的变动：通过compatible属性进行匹配【转】

    本文转载自:http://blog.csdn.net/ruanjianruanjianruan/article/details/61622053 内核添加dts后,device和device_driv ...

  7. POJ3126 Prime Path —— BFS + 素数表

    题目链接:http://poj.org/problem?id=3126 Prime Path Time Limit: 1000MS   Memory Limit: 65536K Total Submi ...

  8. html5--6-28 css盒模型4

    html5--6-28 css盒模型4 实例 学习要点 了解盒模型 元素内容.内边距.边框 和 外边距 了解盒模型的概念: CSS 盒模型规定了处理元素内容.内边距.边框 和 外边距 的方式. 最内部 ...

  9. CollapsingToolbarLayout 收缩显示tilte

    final CollapsingToolbarLayout collapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id. ...

  10. 书写优雅的shell脚本（四） - kill命令的合理使用

    Linux中的kill命令用来终止指定的进程(terminate a process)的运行,是Linux下进程管理的常用命令.通常,终止一个前台进程可以使用Ctrl+C键,但是,对于一个后台进程就须 ...