jQuery实现热搜框

最新推荐文章于 2023-07-24 12:36:25 发布

啥时候能干全栈

最新推荐文章于 2023-07-24 12:36:25 发布

阅读量544

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/qq_42177478/article/details/103646235

版权

jQuery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

功能：点击换一换，换到下一页直至第一页，通过当前指数和历史指数的差值，显示下降或上升趋势
在这里插入图片描述

<!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: 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;
           position: inline-block;
           width: 50px;
           height: 50px;
           padding :3px;
           /* border: 1px solid black; */
           text-align: center;
           background: #0bf;
       }
       .wrapper .showSection .mes{
           float: right;
       }
       .wrapper .showSection .mes::after{
        content: '';
           display: inline-block;
           width: 15px;
           height: 15px;

       }
       .wrapper .showSection .mes.up::after{
          
           background-image: url('./1.png');
           background-size: 100% 100%;
       }
       .wrapper .showSection .mes.down::after{
          
           background-image: url('./2.png');
           background-size: 100% 100%;
       }
       .wrapper ul li{
           border-bottom: 1px solid #ccc;
           padding:5px 0;
       }


   </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"></span>
                          <span class="title"></span>
                          <span class="mes up"></span>
                      </li>
                  </ul>
              </div>                                    
    <script src="./jquery.js"></script>
    <!-- <script src="./myjQuery.js"></script> -->
    <script src="./data.js"></script>
   <script>
       (function(){
           //初始化变量
           var $Wrapper = $('.wrapper');
           var $showSection = $Wrapper.find('.showSection');
           var colorsArray = ['#f54545','#ff8547','ffac38'];
           //当前处在第一页
           var curPage = 0;
           var totlePage = Math.ceil(data.length/10);
           //初始化样式操作
           $showSection.hide();
           function bindEvent(){
               $Wrapper.find('.change').on('click',function(){
                  curPage =  ++curPage % totlePage;
                  renderPage(data);

               });
           }

           function renderPage(data){
               $showSection.hide().find('.showItem').remove();
               //根据数据渲染页面
               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]

                   $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>

啥时候能干全栈

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jQuery实现热搜框

功能：点击换一换，换到下一页直至第一页<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &...
复制链接

扫一扫