百度分页器

最新推荐文章于 2022-08-03 11:35:23 发布

hanq2016

最新推荐文章于 2022-08-03 11:35:23 发布

阅读量166

点赞数

分类专栏： js 文章标签： javascript jquery css3 html html5

本文链接：https://blog.csdn.net/hanq2016/article/details/115059856

版权

js 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1,minimum-scale=1, user-scalable=no"
    />
    <title>模仿百度分页</title>
    <link rel="stylesheet" href="./css/page.css" />
    <script src="./js/jquery-3.5.1.js"></script>
    <script src="./js/page.js"></script>
  </head>
  <body>
    <!-- 分页器 -->
    <div id="page">
      <div class="desc">共<span>23</span>页，第<span>1</span>页</div>
      <div class="page-inner">
        <a href="#" class="prev-page">&lt;上一页</a>
        <a href="#" class="next-page">下一页&gt;</a>
      </div>
      <div class="sel">
        <input type="text" value="1" class="pager" />
        <select class="opt">
          <option value="5">5</option>
          <option value="10">10</option>
          <option value="15">15</option>
          <option value="20">20</option>
        </select>
      </div>
    </div>
  </body>
</html>

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

#page {
  width: 780px;
  margin: 0 auto;
  border: 1px solid rgb(129, 128, 128);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
}

#page .sel .pager {
  width: 43px;
  height: 30px;
  line-height: 30px;
  border-radius: 5px;
  outline: none;
  border: none;
  text-align: center;
  margin: 3px;
  background-color: #38467c;
  color: #ffffff;
}
#page .desc {
  font-size: 12px;
  margin: 3px;
  color: #38467c;
}

#page .sel .opt {
  width: 60px;
  height: 30px;
  line-height: 30px;
  border-radius: 5px;
  outline: none;
  border: none;
  background-color: #ddd;
  text-indent: 10px;
  color: #38467c;
}

#page a {
  text-decoration: none;
  color: #38467c;
  display: block;
  width: 30px;
  height: 30px;
  line-height: 30px;
  border-radius: 5px;
  margin: 3px;
  float: left;
  background-color: #ddd;
  text-align: center;
  font-size: 12px;
  cursor: pointer;
}

#page .active {
  background-color: #38467c;
  color: #ffffff;
}

#page .prev-page,
#page .next-page {
  width: 80px;
}

#page a:hover {
  background-color: #4e6ef2;
  color: #ffffff;
}

/*----------本项目要依赖jquery-3.5.1.js的支持----------- */

//当前页码
let currentPage = 1;
//总页数
let totalPage = 20;

/**
 * 动态生成分页器的函数
 * @date 2021-03-22
 * @param {any} pageNum
 * @returns {any}
 */
function appendList(pageNum) {
  $(".desc span:eq(0)").html(totalPage);
  //先删除所有的page-item
  let pageItem = $(".page-item");
  if (pageItem) {
    pageItem.remove();
  }
  //确定当前页码的范围
  let start = pageNum <= 6 ? 1 : pageNum - 5;
  let end = start + 9;
  //如果超过总条数时，等于总条数
  if (end >= totalPage) {
    end = totalPage;
  }
  //使用循环拼接元素
  for (let i = start; i <= end; i++) {
    let a = $(`<a class="page-item">${i}</a>`);
    //给点击的元素添加
    if (pageNum === i) {
      a = $(`<a class="page-item active">${i}</a>`);
    }
    //把a元素动态拼接到页码中
    a.insertBefore($(".next-page"));
    //给a元素绑定事件
    a.click(function () {
      let index = parseInt(a.html());
      appendList(index);
      currentPage = index;
      $(".pager").val(currentPage);
      $(".desc span:eq(1)").html(currentPage);
    });
  }
}

//工厂函数
$(function () {
  //页面首次加载第1页
  appendList(1);
  //点击下一页的操作
  $(".next-page").click(function () {
    currentPage++;
    if (currentPage >= totalPage) {
      currentPage = totalPage;
    }
    appendList(currentPage);
    $(".pager").val(currentPage);
    $(".desc span:eq(1)").html(currentPage);
  });
  //点击上一页的操作
  $(".prev-page").click(function () {
    currentPage--;
    if (currentPage <= 0) {
      currentPage = 1;
    }
    appendList(currentPage);
    $(".pager").val(currentPage);
    $(".desc span:eq(1)").html(currentPage);
  });
  //pager输入框失去焦点或回车时可以实现分页器的变化
  $(".pager")
    .blur(function () {
      let currentPage = +$(this).val();
      appendList(currentPage);
      $(".pager").val(currentPage);
      $(".desc span:eq(1)").html(currentPage);
    })
    .keydown(function (e) {
      if (e.which === 13) {
        let currentPage = +$(this).val();
        appendList(currentPage);
        $(".pager").val(currentPage);
        $(".desc span:eq(1)").html(currentPage);
      }
    });
});

hanq2016

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
百度分页器

<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-sc...
复制链接

扫一扫