jQuery 小demo 热点排名
效果如下：
代码如下：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>Document</title>
8 <link rel="stylesheet" href="./css/css-comment.css">
9 <style>
10 a:active, a:hover{
11 text-decoration: underline;
12 }
13 body{
14 color: #000;
15 }
16 .wrapper{
17 position:absolute;
18 top: 150px;
19 left: 50%;
20 margin-left: -175px;
21 border: 1px solid black;
22 width: 351px;
23 }
24 .clearF::after{
25 content: '';
26 display: block;
27 clear: both;
28 overflow: hidden;
29 }
30 .wrapper .topSection{
31 padding: 5px 7px 0px;
32 height: 25px;
33 }
34 .wrapper .topSection .hot{
35 font-weight: 700;
36 font-size: 14px;
37 color: #000;
38 line-height: 25px;
39 }
40 .wrapper .topSection .change{
41 float: right;
42 cursor: pointer;
43 line-height: 25px;
44 color: #3196d9;
45 }
46 .wrapper .showSection{
47 padding: 5px 7px;
48 }
49
50 .wrapper .showSection li{
51 height: 17px;
52 line-height: 17px;
53 padding: 5px 0 5px 0;
54 }
55
56 .wrapper .showSection .number{
57 display: inline-block;
58 padding: 1px 0;
59 color: #fff;
60 width: 14px;
61 line-height: 100%;
62 font-size: 12px;
63 text-align: center;
64 background-color: #0483f4;
65 }
66 .wrapper .showSection .title{
67 padding-left: 5px;
68 font-size: 13px;
69 color: #3045da;
70 }
71 .wrapper .showSection .mes{
72 float: right;
73 }
74 .wrapper .showSection .mes::after{
75 content: '';
76 display: inline-block;
77 width: 15px;
78 height: 15px;
79 background-size: 100% 100%;
80 background-position-y: 2px;
81 background-repeat: no-repeat;
82 }
83 .wrapper .showSection .mes.up::after{
84 background-image: url('./img/up.png');
85 }
86 .wrapper .showSection .mes.down::after{
87 background-image: url('./img/down.png');
88 }
89 .tpl{
90 display: none;
91 }
92 </style>
93 </head>
94 <body>
95 <div class="wrapper">
96 <div class="topSection clearF">
97 <span class="hot">搜索热点</span>
98 <span class="change">换一换</span>
99 </div>
100 <ul class="showSection">
101 <li class="tpl clearF">
102 <span class="number">1</span>
103 <a href="#" class="title">英停售华为5G手机</a>
104 <span class="mes">1149万</span>
105 </li>
106 </ul>
107 </div>
108 <script src="./jquery/jquery.js"></script>
109 <script src="./js/serverData.js"></script>
110 <script>
111 (function(data){
112 var colorsArray = ['#f54545', '#ff8547', '#ffac38']; // 字体颜色
113 var wrapper = $('.wrapper');
114 var showSection = wrapper.find('.showSection');
115 var curPage = 0; //页数
116 var totalPage = Math.ceil( data.length / 10 );
117
118 showSection.hide(); //先隐藏， 后 淡出动画效果
119
120 function bindEvent(){ //绑定事件，点击后，页数 ++
121 wrapper.find('.change').on('click',function(){
122 curPage = ++curPage % totalPage; // 利用数学计算，让每次点击后 ++ 到4 的时候 变成 0
123 renderPage(data) //点击后， 拿到新页数， 重新 渲染页面
124 })
125 }
126 function renderPage(data){
127 showSection.find('.tpl').nextAll().remove(); // 删除以前的结构。
128 showSection.hide();
129
130 var len = (data.length - curPage * 10) >= 10 ? 10 : data.length - curPage * 10;
131 // ↑ 计算后， 每次渲染的 数据为 10 条。 到了 第 3 页，要循环的 为 4 此而已。
132
133 for(var i = 0; i < len; i ++){
134 var cloneLi = showSection.find('.tpl').clone().removeClass('tpl'); //克隆，上面的html 作为模板
135 var ele = data[i + curPage * 10];
136 cloneLi.find('.number')
137 .text(i + curPage * 10 + 1)
138 .css('background', curPage == 0 && (colorsArray[i + curPage * 10 + 1] || '#0483f4'))
139 .next()
140 .text(ele.title)
141 .next()
142 .addClass(ele.search > ele.hisSearch ? 'up' : 'down');
143
144 showSection.append(cloneLi);
145 showSection.fadeIn();
146 }
147 }
148 bindEvent();
149 renderPage(data);
150 })(data)
151 </script>
152 </body>
153 </html>
以下代码为测试 数据:
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 热点排名的更多相关文章
- 新手 gulp+ seajs 小demo
首先,不说废话,它的介绍和作者就不在多说了,网上一百度一大堆: 我在这里只是来写写我这2天抽空对seajs的了解并爬过的坑,和实现的一个小demo(纯属为了实现,高手请绕道); 一.环境工具及安装 1 ...
- 一个基于ES6+webpack的vue小demo
上一篇文章<一个基于ES5的vue小demo>我们讲了如何用ES5,vue-router做一个小demo,接下来我们来把它变成基于ES6+webpack的demo. 一.环境搭建及代码转换 ...
- 一个基于ES5的vue小demo
由于现在很多vue项目都是基于ES6开发的,而我学vue的时候大多是看vue官网的API,是基于ES5的,所以对于刚接触项目的我来说要转变为项目的模块化写法确实有些挑战.因此,我打算先做一个基于ES5 ...
- 基于HTML5 audio元素播放声音jQuery小插件
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1609 一.前面的些唠 ...
- 入门Leaflet之小Demo
入门Leaflet之小Demo 写在前面 ---- WebGIS开发基础之Leaflet GIS基本概念:GIS.Map.Layer.Feature.Geometry.Symbol.Data(Poin ...
- 【Java】Jsoup爬虫,一个简单获取京东商品信息的小Demo
简单记录 - Jsoup爬虫入门实战 数据问题?数据库获取,消息队列中获取中,都可以成为数据源,爬虫! 爬取数据:(获取请求返回的页面信息,筛选出我们想要的数据就可以了!) 我们经常需要分析HTML网 ...
- Nancy之基于Nancy.Hosting.Self的小Demo
继昨天的Nancy之基于Nancy.Hosting.Aspnet的小Demo后, 今天来做个基于Nancy.Hosting.Self的小Demo. 关于Self Hosting Nancy,官方文档的 ...
- Nancy之基于Nancy.Owin的小Demo
前面做了基于Nancy.Hosting.Aspnet和Nancy.Hosting.Self的小Demo 今天我们来做个基于Nancy.Owin的小Demo 开始之前我们来说说什么是Owin和Katan ...
- Nancy之基于Self Hosting的补充小Demo
前面把Hosting Nancy with ASP.NET.Self Hosting Nancy和Hosting Nancy with OWIN 以demo的形式简单描述了一下. 这篇是为Self H ...
随机推荐
- OpenCV开发笔记（七十二）：红胖子8分钟带你使用opencv+dnn+tensorFlow识别物体
前言 级联分类器的效果并不是很好,准确度相对深度学习较低,本章使用opencv通过tensorflow深度学习,检测已有模型的分类. Demo 可以猜测,1其实是人,18序号类是狗 ...
- D. Regular Bridge 解析(思維、圖論)
Codeforce 550 D. Regular Bridge 解析(思維.圖論) 今天我們來看看CF550D 題目連結 題目 給你一個\(k\le100\),請構造出一個至少有一個Bridge的,每 ...
- Go语言反射（reflect）及应用
Go语言反射(reflect)及应用 基本原理及应用场景 在编译时不知道类型的情况下,可更新变量.在运行时查看值.调用方法以及直接对它们的布局进行操作,这种机制被称为反射. 具体的应用场景大概如下: ...
- python机器学习实现线性回归
线性回归 关注公众号"轻松学编程"了解更多. [关键词]最小二乘法,线性 一.普通线性回归 1.原理 分类的目标变量是标称型数据,而回归将会对连续型的数据做出预测. 应当怎样从一大 ...
- 浅谈 Johnson 算法
目录 前言 引入 算法概述 算法流程 正确性证明 代码实现 结语 前言 Johnson 和 Floyd 一样是用来解决无负环图上的全源最短路. 在稀疏图上的表现远远超过 Floyd,时间复杂度 \(O ...
- 汉诺塔问题实验--一个简洁的JAVA程序
思路: 这里使用递归法 n==1的时候,直接把它从x移到z位置即可. 如果是n层,我们首先把上面的n- 1层移到y位置,然后把最 下面的那个最大的盘子,移到z位置,然后把y上面放的上面n-1层移到z位 ...
- HTTPDNS开源 Android SDK，赋能更多开发者参与共建
为赋能更多开发者参与共建,阿里云HTTPDNS开源 Android SDK,iOS SDK也在做开源准备,不久也将开放给开发者.HTTPDNS是阿里云移动研发平台面向多端应用(移动端APP,PC客户端 ...
- Module not found: Can't resolve 'bootstrap/dist/css/bootstrap-theme.css' in 'C:\react-form-validation-demo\src'
此错误是由配置错误.版本不匹配或引导安装损坏引起的.如果已经安装了引导程序和反应引导程序,则可以通过以下方式进行更改: npm install --save bootstrap@^4.0.0-al ...
- 获取元素计算样式getComputedStyle（）与currentStyle
window.getComputedStyle()方法是标准化接口,返回一个对象,该对象在应用活动样式表并解析这些值可能包含的任何基本计算后报告元素的所有CSS属性的值. 私有的CSS属性值可以通过对 ...
- 【JVM第二篇--类加载机制】类加载器与双亲委派模型
写在前面的话:本文是在观看尚硅谷JVM教程后,整理的学习笔记.其观看地址如下:尚硅谷2020最新版宋红康JVM教程 一.什么是类加载器 在类加载过程中,加载阶段有一个动作是"通过一个类的全限 ...