先来看一下成品图：

 <!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. 数组index

    1. 数组index与数组名的位置关系     a[b] = *(a + b) = *(b + a) = b[a] int a[5] = {1, 2, 3, 4, 5}; printf("% ...

  2. 利用python暴力破解ssh

    # -*- coding:utf-8 -*- #python 2.7 import optparse,sys,threading import pexpect PROMPT = ['#','>' ...

  3. hdu 4858 项目管理(vector模拟)

    # include <stdio.h> # include <algorithm> # include <string.h> # include <vecto ...

  4. centos 7.xx 安装LAMP环境

    一.安装Apache 1.安装yum -y install httpd2.开启apache服务systemctl start httpd.service3.设置apache服务开机启动systemct ...

  5. hdoj 4932 Miaomiao&#39;s Geometry 【暴力枚举】

    题意:在一条直线上有n个点.取一长度差为x的区间. 规定点必须是区间的端点. 让你找出来最大的x 策略:rt 分析可得:两个相邻点之间的区间要么是两个点的差,要么就是两个点的差的一半,那我们就简单枚举 ...

  6. 细数AutoLayout以来UIView和UIViewController新增的相关API

    本文转载至 http://www.itjhwd.com/autolayout-uiview-uiviewcontroller-api/ 细数AutoLayout以来UIView和UIViewContr ...

  7. 我遇到的错误curl: (7) Failed to connect to 127.0.0.1 port 1086: Connection refused

    今天我用curl命令,无论如何都是出现: curl: (7) Failed to connect to 127.0.0.1 port 1086: Connection refused 找了很久,不知道 ...

  8. log Configuration

    Log4j – Configuring Log4j 2 - Apache Log4j 2 https://logging.apache.org/log4j/2.x/manual/configurati ...

  9. MongoDB Spark Connector

    [在文件/usr/bin/yum./usr/libexec/urlgrabber-ext-down最上面的一行改为#!/usr/bin/python2.7] yum install git Note: ...

  10. VC FTP服务器程序分析（四）

    下面是数据传输的重点-CDataSocket类,函数不多,都比较重要. 1.OnAccept  数据tcp服务器被连接的虚函数,由框架调用. void CDataSocket::OnAccept(in ...