jquery应用--仿搜索热点排名_仿搜索热点列表换一换-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_37635519/article/details/90266714

本文通过jQuery演示如何创建一个仿搜索热点排名的功能，展示代码及其运行效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

  <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
 	<style type="text/css" media="screen">
 	  *{
 	  	margin:0;
 	  	padding:0;
 	  	list-style: none;
 	  	text-decoration: none;
 	  }

 	  .clearF:after{
			content: "";
			display: block;
			clear:both;
			overflow: hidden;
 	  }
 	  .tpl{
 	  	display:none;

		
 	  }
 	 .showSection li{
		padding:5px 0;
		border-bottom: 1px solid #ccc;
 	  }
 	  .wrapper{
 	  	border:1px solid #ccc;
 	  	padding:10px 5px;
 	  	width: 350px;
 	  	margin:100px auto 0px;
 	  }
 	  .headSection{

 	  	margin-bottom:10px;
 	  }
 	  .hot{
 	  	font-size: 18px;
 	  	font-weight: blod;
 	  	float:left;
 	  }
 	  .change{
 	  	float:right;
 	  	color:#08f;
 	  	cursor:pointer;
 	  }
	.number{
		color:#fff;
		background-color: #0bf;
		width:20px;
		height:20px;
		text-align: center;
		line-height: 20px;
		display: inline-block;

	}
	.mes{
		float:right;

	}
	.mes.up::after{
		content: "";
		display: inline-block;
		width: 15px;
		height:15px;
		background-image: url(./img/up.png);
		background-size: 100% 100%;

	}
	.mes.down::after{
		content: "";
		display: inline-block;
		width: 15px;
		height:15px;
		background-image:  url(./img/down.png);
		background-size: 100% 100%;

	}
 	</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">35432</span>
	 	 		</li>
	 	 	</ul>
	 	</div>
	 
	
	 <script src="./jquery-3.3.1.min.js"></script>
	 <script src="./serverData.js"></script>
	 <script>
	 			(function(data){
	 				//初始化变量
	 				var $Wrapper=$('.wrapper');
	 				var $ShowSection=$(".wrapper .showSection")
	 				var colorsArray=["#f54545","#ff8547","#ffac38"];
	 				var curPage=0;
	 				var totalPage=Math.ceil(data.length/10)
	 				 $ShowSection.hide();
	 				 function bindevent(){
	 				 	$Wrapper.find(".change").on("click",function(){
	 				 		curPage=++curPage%totalPage;
	 				 		 // $ShowSection.html("");
	 				 		renderPage(data);
	 				 	})
	 				 }
	 				function renderPage(data){
	 					//根据数据渲染数据
	 					$ShowSection.hide().find('.showItem').remove()
	 					// $ShowSection.html("");
	 					var len=(data.length-curPage*10)>=10?10:(data.length-curPage*10);
	 					for(var i=0;i<len;i++){
	 						var $Clone=$Wrapper.find(".tpl").clone().removeClass("tpl").addClass("showItem");
	 						var ele=data[i+curPage*10];
	 						 
	 						// console.log($Clone)
	 						$Clone.children()
	 							.eq(0)
	 								.text(i+1+curPage*10)
	 									.css("backgroundColor",curPage==0&&colorsArray[i]).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>

在这里插入图片描述