先来看一下成品图：

 <!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. PHP读取excel(5)

    如果数据量很大的时候,就需要用PHPExcel迭代器逐行读取,具体代码如下: <?php header("Content-Type:text/html;charset=utf-8&qu ...

  2. delphi中的HOOK [转贴]

    按事件分类,有如下的几种常用类型的钩子: 1)键盘钩子可以监视各种键盘消息. 2)鼠标钩子可以监视各种鼠标消息. 3)外壳钩子可以监视各种Shell事件消息. 4)日志钩子可以记录从系统消息队列中取出 ...

  3. Safair css hack

    一下方式不会影响chrome浏览器样式 _::-webkit-full-page-media, _:future, :root .class{ /*此处放css样式*/ }

  4. ios对于枚举的使用

    引言: 枚举值 它是一个整形(int)  并且,它不参与内存的占用和释放,枚举定义变量即可直接使用,不用初始化. 在代码中使用枚举的目的只有一个,那就是增加代码的可读性. 使用: 枚举的定义如下: t ...

  5. Windows 7 繁体中文MSDN原版

    Win7 SP1 64位旗舰版繁体版ISO镜像(香港):文件名:hk_windows_7_enterprise_with_sp1_x64_dvd_620688.isoSHA1:82D59B099333 ...

  6. POJ2976 Dropping tests —— 01分数规划 二分法

    题目链接:http://poj.org/problem?id=2976 Dropping tests Time Limit: 1000MS   Memory Limit: 65536K Total S ...

  7. 织梦CMS首页、列表页文章如何调出该文章TAG标签?

    1.如果是dedecms v5.7版本直接使用标签 [field:id function=GetTags(@me)/] 就可以调用出来了.只不过不带连接的. 2.如果需要连接请注释掉include/h ...

  8. iOS中NSNotification、delegate、KVO三者之间的区别与联系？

    前面分别讲了delegate.notification和KVO的实现原理,以及实际使用步骤,我们心中不禁有个疑问,他们的功能比较类似,那么在实际的编程中,如何选择这些方式呢? 在网上看到一个博客上详细 ...

  9. 【POJ 2411】 Mondriaan's Dream

    [题目链接] 点击打开链接 [算法] 很明显,我们可以用状态压缩动态规划解决此题 f[n][m]表示n-1行已经放满,第n行状态为m的合法的方案数 状态转移方程很好推 注意这题时限较紧,注意加一些小优 ...

  10. nodejs 打造 多人对战游戏服务器（初级入门）

    使用socket.set 和 socket.get 在存取玩家信息 百牛信息技术bainiu.ltd整理发布于博客园 socket.get('playerinfo', function (err, p ...