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的具体 ...
随机推荐
- 全国省市区三级联动js
function Dsy(){ this.Items = {}; } Dsy.prototype.add = function(id,iArray){ this.Items[id] = iArray; ...
- v-on指令
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Arcgis Engine（ae）接口详解（6）：workspace操作
//此处用的workspace来源与用户选择 IWorkspace workspace = null; //workspace一般等同于数据库 //工作空间类型,也可理解为数据库类型 //esriFi ...
- 值得收藏的45个Python优质资源（附链接）
REST API:使用 Python,Flask,Flask-RESTful 和 Flask-SQLAlchemy 构建专业的 REST API https://www.udemy.com/rest- ...
- Jenkins+appium+testng持续集成
Create maven project in eclipseAdd Appium , Selenium dependancyAdd Test in TestNG testCreate TestNG ...
- leetcode -day17 Path Sum I II & Flatten Binary Tree to Linked List & Minimum Depth of Binary Tree
1. Path Sum Given a binary tree and a sum, determine if the tree has a root-to-leaf path such tha ...
- 集群环境搭建-SSH免密码登陆(二)
1.打开sshd配置 命令: vi /etc/ssh/sshd_config 找到以下内容,并去掉注释符”#“ RSAAuthentication yes PubkeyAuthentication y ...
- NEU 1681: The Singles
题目描述 The Signals’ Day has passed for a few days. Numerous sales promotion campaigns on the shopping ...
- 深入浅出Oracle学习笔记：Undo
undo的作用是:解决oracle多用户读写一致性,以及操作可撤销或者回滚. 1.undo表空间是从10g开始进行自动管理的,几个参数如下: undo_management:回滚段手动管理还是自动管理 ...
- python批量读取txt文件为DataFrame
我们有时候会批量处理同一个文件夹下的文件,并且希望读取到一个文件里面便于我们计算操作.比方我有下图一系列的txt文件,我该如何把它们写入一个txt文件中并且读取为DataFrame格式呢? 首先我们要 ...