jQuery笔记之热点搜索排名小demo
先来看一下成品图：
<!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的更多相关文章
- [PHP][学习笔记][CURL]监测设备运行情况小demo
1.curl获取的web content 不能直接echo到页面,会造成js各种错误 2.想办法处理字符串的截取.拼接 2.1.裁剪html返回的字符串 function cutStringFrom( ...
- 模仿京东顶部搜索条效果制作的一个小demo
最近模仿京东顶部搜索条效果制作的一个小demo,特贴到这里,今后如果有用到可以参考一下,代码如下 #define kScreenWidth [UIScreen mainScreen].bounds.s ...
- 入门Leaflet之小Demo
入门Leaflet之小Demo 写在前面 ---- WebGIS开发基础之Leaflet GIS基本概念:GIS.Map.Layer.Feature.Geometry.Symbol.Data(Poin ...
- 新手 gulp+ seajs 小demo
首先,不说废话,它的介绍和作者就不在多说了,网上一百度一大堆: 我在这里只是来写写我这2天抽空对seajs的了解并爬过的坑,和实现的一个小demo(纯属为了实现,高手请绕道); 一.环境工具及安装 1 ...
- 前端：jQuery笔记
前端:jQuery笔记 此系列文章乃是学习jQuery的学习笔记. Asp.net MVC Comet推送 摘要: 一.简介 在Asp.net MVC实现的Comet推送的原理很简单. 服务器端:接收 ...
- Python全栈之jQuery笔记
jQuery runnoob网址: http://www.runoob.com/jquery/jquery-tutorial.html jQuery API手册: http://www.runoob. ...
- 【Java】Jsoup爬虫,一个简单获取京东商品信息的小Demo
简单记录 - Jsoup爬虫入门实战 数据问题?数据库获取,消息队列中获取中,都可以成为数据源,爬虫! 爬取数据:(获取请求返回的页面信息,筛选出我们想要的数据就可以了!) 我们经常需要分析HTML网 ...
- lucene.net 3.0.3、结合盘古分词进行搜索的小例子(转)
lucene.net 3.0.3.结合盘古分词进行搜索的小例子(分页功能) 添加:2013-12-25 更新:2013-12-26 新增分页功能. 更新:2013-12-27 新增按分类查询功能, ...
- 一周一个小demo — 前端后台的交互实例
这一周呢,本K在大神的指导下,完成了一个利用ajax与php文件上传处理相结合的一个留言板功能的小实例,下面就让本K来带大家瞅瞅如何实现这一种功能. 一.界面概览 首先我们来看一下这个小demo的具体 ...
随机推荐
- @SuppressWarnings 用法
从Java 5.0起,您可以使用java.lang.SuppressWarning注释,来停用与编译单元子集相关的编译警告 作用:用于抑制编译器产生警告信息. Idea 设置泛型检查,变量.方法未使用 ...
- java使用默认线程池踩过的坑（三）
云智慧(北京)科技有限公司 陈鑫 重新启动线程池 TaskManager public class TaskManager implements Runnable { -.. public TaskM ...
- 深入浅出 - Android系统移植与平台开发（九）- Android系统system_server及Home启动
3.3 Zygote守护进程与system_server进程 Android的执行环境和Java执行环境有着本质的差别,在Android系统中每一个应用程序都是一独立的进程,当一个进程死掉时,不会影响 ...
- STM32唯一身份识别ID（器件电子签名）的读取以及芯片Flash大小读取
每个STM32有一个独立的ID,这个ID可以用来: 产品唯一的身份标识的作用: ● 用来作为序列号(例如USB字符序列号或者其他的终端应用): ● 用来作为密码,在编写闪存时,将此唯一 ...
- web 前端冷知识
前端已经被玩儿坏了!像console.log()可以向控制台输出图片等炫酷的玩意已经不是什么新闻了,像用||操作符给变量赋默认值也是人尽皆知的旧闻了,今天看到Quora上一个帖子,瞬间又GET了好多前 ...
- x$kccle视图深入剖析
今天是2014-05-27,实在无聊顺便研究一下x$kccle的内容吧.例如以下所有是自己分析和实验结果,真实可靠. 1.怎样获得v$log的底层表?我们能够通过autotrace完毕查看如 ...
- POJ1077 Eight —— 经典的搜索问题
题目链接:http://poj.org/problem?id=1077 Eight Time Limit: 1000MS Memory Limit: 65536K Total Submission ...
- ASP.NET Session and Forms Authentication and Session Fixation
https://peterwong.net/blog/asp-net-session-and-forms-authentication/ The title can be misleading, be ...
- loadrunner性能测试步骤
性能测试过程分为4个阶段:设计.构建.执行.分析/诊断/调节具体的工作流程如下图 设计 > 构建 > 执行 > 分析/诊断/调节 收集要求 设置测试环境 基准测试 诊断瓶颈 设计测试 ...
- JSON详解+ C# String.Format格式说明+ C# ListView用法详解 很完整
JSON详解 C# String.Format格式说明 C# ListView用法详解 很完整