1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  
  4.  <head>
  5.      <meta charset="UTF-8">
  6.      <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.      <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.      <title>Document</title>
  9.      <style>
  10.          div {
  11.              width: 800px;
  12.              height: 40px;
  13.              border: 1px solid #000;
  14.              margin: 30px auto;
  15.          }
  16.      </style>
  17.  </head>
  18.  
  19.  <body>
  20.      <!-- 页面搞一个div  w800 h40 b1实黑 margin 30 auto -->
  21.      <div></div>
  22.      <script>
  23.          let divObj = document.querySelector("div")
  24.          let pageTag = {
  25.              first: '首页',
  26.              prev: '上一页',
  27.              list: null,
  28.              next: '下一页',
  29.              last: '末页',
  30.          };
  31.  
  32.          // page 分页、 total 总、data 数据
  33.          let pageInfo = {
  34.              pageNum: 6, // 当前页数
  35.              pageSize: 10, // 每页显示条数
  36.              totalData: 1000, // 总条数
  37.              totalPage: 100, // 总页数 = 向上取整（总条数 / 每页显示条数）
  38.          }
  39.          pageInfo.totalPage = Math.ceil(pageInfo.totalData / pageInfo.pageSize)
  40.          showTag()
  41.              //div 设置为弹性盒
  42.          divObj.style.display = "flex"
  43.          divObj.style.justifyContent = "center"
  44.          divObj.style.alignItems = "center"
  45.  
  46.          //分页标签
  47.          function showTag() {
  48.  
  49.              //遍历对象创建和添加节点通过核心
  50.              // DOM语法创建p标签 最终在页面追加（ createElement createTextNode appendChild）
  51.              for (var item in pageTag) {
  52.                  // 创建标签
  53.                  let p = document.createElement("p")
  54.                  if (item == "list") {
  55.                      pageTag.list = p
  56.                  } else {
  57.                      // 创建文本
  58.                      const text = document.createTextNode(pageTag[item])
  59.                          //追加文本
  60.                      p.appendChild(text)
  61.                          // 设置标签对象样式
  62.                      p.style.border = "1px solid #000"
  63.                      p.style.margin = "0 5px"
  64.                      p.style.padding = "0 5px"
  65.  
  66.                  }
  67.                  // 追加到div
  68.                  divObj.appendChild(p)
  69.                  console.log(divObj)
  70.                      // console.log(pageTag.list)
  71.                      // showNum()
  72.              }
  73.              // 禁用
  74.              var divTag = divObj.querySelectorAll("p")
  75.              console.log(divTag)
  76.              if (pageInfo.pageNum == 1) {
  77.                  divTag[0].style.background = "#ccc"
  78.                  divTag[1].style.background = "#ccc"
  79.              }
  80.              if (pageInfo.pageNum == pageInfo.totalPage) {
  81.                  divTag[3].style.background = "#ccc"
  82.                  divTag[4].style.background = "#ccc"
  83.              }
  84.              showNum()
  85.  
  86.          }
  87.          // showNum()
  88.  
  89.          //封装创建null p
  90.          // var listObj = pageTag.list
  91.  
  92.          function creatP(i, tag = "p") {
  93.              // divObj.innerHTML = ""
  94.              // 步骤1：创建p标签里面写数字（createEle ment、createTextNode、appendChild）
  95.              const p = document.createElement(tag)
  96.              console.log(p)
  97.              const text = document.createTextNode(i)
  98.              p.appendChild(text)
  99.  
  100.              console.log(p.innerText)
  101.                  // 步骤3：给p标签设置样式 border margin padding （注：同之前的p）
  102.              if (tag != "span") {
  103.                  p.style.border = "1px solid #000"
  104.                  p.style.margin = "0 5px"
  105.                  p.style.padding = "0 5px"
  106.              }
  107.  
  108.              // 步骤4：追加到null标签对象里面
  109.  
  110.              divObj.appendChild(p)
  111.              console.log(pageTag.list)
  112.  
  113.              // // 步骤5：设置默认选中效果
  114.              if (i == pageInfo.pageNum) {
  115.                  p.style.background = "orange"
  116.              }
  117.          }
  118.          //标签对象的数据
  119.          function showNum() {
  120.  
  121.              // // 步骤0：获取null标签对象，
  122.              // var listObj = pageTag.list
  123.              //设置listObj 为弹性盒
  124.              pageTag.list.style.display = "flex"
  125.              pageTag.list.style.justifyContent = "center"
  126.              pageTag.list.style.alignItems = "center"
  127.                  //控制点
  128.              if (pageInfo.totalPage < 10) {
  129.                  for (j = 1; j <= pageInfo.totalPage; j++)
  130.                      creatP(j)
  131.  
  132.              } else {
  133.                  // //额外规律：思考如果你的数据只有2页有意义加点吗？
  134.                  //         回答：没有，至少10页
  135.                  // pageNum < 5    1 2 3 4 5...99 100
  136.                  if (pageInfo.pageNum < 5) {
  137.                      for (let i = 1; i <= 5; i++) {
  138.                          creatP(i)
  139.                      }
  140.                      creatP("...", "span");
  141.                      creatP(pageInfo.totalPage - 1)
  142.                      creatP(pageInfo.totalPage)
  143.                  } else if (pageInfo.pageNum == 5) {
  144.                      // pageNum == 5 1 2 3 4 5 6 7...99 100
  145.                      for (let i = 1; i <= 7; i++) {
  146.                          creatP(i)
  147.                      }
  148.                      creatP("...", "span");
  149.                      creatP(pageInfo.totalPage - 1)
  150.                      creatP(pageInfo.totalPage)
  151.                  } else if (pageInfo.pageNum > 5 && pageInfo.pageNum < pageInfo.totalPage - 4) {
  152.                      // pageNum > 5 && pageNum < 总页数 - 4 1 2...左2个 pageNum 右边2个...99 100
  153.                      creatP(1)
  154.                      creatP(2)
  155.                      creatP("...", "span")
  156.                      for (i = pageInfo.pageNum - 2; i <= pageInfo.pageNum + 2; i++) {
  157.                          creatP(i)
  158.                      }
  159.                      creatP("...", "span")
  160.                      creatP(99)
  161.                      creatP(100)
  162.  
  163.                  } else if (pageInfo.pageNum == pageInfo.totalPage - 4) {
  164.                      // pageNum == 总页数 - 4 1 2......后5五
  165.                      // pageNum > 总页数 - 4 1 2......后5五
  166.                      creatP(1)
  167.                      creatP(2)
  168.                      creatP("...", "span")
  169.                      creatP("...", "span")
  170.                      for (i = 0; i <= 4; i++) {
  171.                          creatP(pageInfo.pageNum + i)
  172.                      }
  173.  
  174.                  } else if (pageInfo.pageNum > pageInfo.totalPage - 4) {
  175.                      // pageNum == 总页数 - 4   1 2......后5五
  176.                      // pageNum > 总页数 - 4   1 2......后5五
  177.                      // if()
  178.                      creatP(1)
  179.                      creatP(2)
  180.                      creatP("...", "span")
  181.                      creatP("...", "span")
  182.                      for (i = pageInfo.totalPage - 4; i <= pageInfo.totalPage; i++) {
  183.                          creatP(i)
  184.                      }
  185.  
  186.                  }
  187.  
  188.              }
  189.          }
  190.      </script>
  191.  </body>
  192.  
  193.  </html>

js面向过程 分页功能的更多相关文章

  1. js面向过程改写成面向对象--通用方法

    响亮的标题:一个万能的,保底的.面向过程改写成面向对象的方法 前提朗读:很多刚接触js面向对象的时候都不知道如何能快速的写出一个面向对象的程序,这个是必然的现象,不是每一位学js的一上来就会写面向对象 ...

  2. 使用原生js实现前端分页功能

    背景: 从后台提取出来数据,在前端进行分页. 代码: user-manage.js window.onload = function(){ var result = { message : " ...

  3. js面向过程-拖拽

    1.步骤分析: 1.1 获取id 1.2 当鼠标点击时执行的js 1.3当鼠标移动时执行的js 1.4当鼠标放开时执行的js 2.代码实现 <!DOCTYPE html> <html ...

  4. js面向过程-经典选项卡

    源代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...

  5. [Ext JS 4] Grid 实战之分页功能

    前言 分页功能的实现有两种途径: 一种是服务端分页方式, 也就是web客户端传递页码参数给服务端,服务端根据页面参数返回指定条数的数据.也就是要多少取多少.这种方式比较适合Grid  的数据量很大,需 ...

  6. C#设计模式总结 C#设计模式(22)——访问者模式（Vistor Pattern） C#设计模式总结 .NET Core launch.json 简介 利用Bootstrap Paginator插件和knockout.js完成分页功能 图片在线裁剪和图片上传总结 循序渐进学.Net Core Web Api开发系列【2】：利用Swagger调试WebApi

    C#设计模式总结 一. 设计原则 使用设计模式的根本原因是适应变化,提高代码复用率,使软件更具有可维护性和可扩展性.并且,在进行设计的时候,也需要遵循以下几个原则:单一职责原则.开放封闭原则.里氏代替 ...

  7. jsp、js分页功能的简单总结

    一.概述 首先,我们要明确为何需要分页技术,主要原因有以下: 1.分页可以提高客户体验度,适当地选择合适的数据条数,让页面显得更有条理,使得用户体验感良好,避免过多数据的冗余. 2.提高性能的需要.分 ...

  8. JS面向对象与面向过程

    前言 面向对象编程: 就是将你的需求抽象成一个对象,然后针对这个对象分析其特征(属性)与动作(方法)--这个对象就称之为类 面向过程编程: 特点:封装,就是将你需要的功能放在一个对象里面 ------ ...

  9. 简单封装分页功能pageView.js

    分页是一个很简单,通用的功能.作为一个有经验的前端开发人员,有义务把代码中类似这样公共的基础性的东西抽象出来,一来是改善代码的整体质量,更重要的是为了将来做类似的功能或者类似的项目,能减少不必要的重复 ...

随机推荐

  1. JavaScript 删除某个数组中指定的对象和删除对象属性

    Javascript: 删除指定对象:使用过程中只适合删除对象,如果数组中添加的是类型Function的话是删除不了的. function removeObjWithArr(_arr,_obj) { ...

  2. 2020牛客寒假算法基础集训营6 E.立方数（唯一分解定理 素数筛）

    https://ac.nowcoder.com/acm/contest/3007/E 放下题解 #include<bits/stdc++.h> using namespace std; t ...

  3. WPF实现高仿统计标题卡

    飘哇~~~,在家数瓜子仁儿,闲来无事,看东看西,也找点儿,最近正在看看WPF动画,光看也是不行,需要带着目的去学习,整合知识碎片,恰巧,看到Github中一个基于Ant Designer设计风格的后台 ...

  4. HBase Hive

    Hbase数据管理 Hbase就是Hadoop database Hbase是列式数据库 因此Hbase特别适合寻找按照时间排序寻找Top n的场景 Hive数据管理 基于 Hadoop 文件系统的数 ...

  5. POJ 1738：An old Stone Game 石子归并 (GarsiaWachs算法)

    There is an old stone game.At the beginning of the game the player picks n(1<=n<=50000) piles ...

  6. UVA - 12333 Revenge of Fibonacci （大数 字典树）

    The well-known Fibonacci sequence is defined as following: F(0) = F(1) = 1 F(n) = F(n − 1) + F(n − 2 ...

  7. Pandownload---windows下几乎无敌的网盘下载神器

    近几天光顾着mac了,今天咱来聊聊Windows. 这个就不多说了,直接贴图. 网页版截图. 电脑版截图. 网页版2020.2.1的时候是失效的,别问我为什么不现在测试,用不着. 不用担心不知道密码, ...

  8. VMware该虚拟机似乎正在使用中。如果该虚拟机未在使用，请按“获取所有权(T)”按钮获取它的所有权

    原文链接:https://blog.csdn.net/helloxiaozhe/article/details/81176684 VMware该虚拟机似乎正在使用中.如果该虚拟机未在使用,请按“获取所 ...

  9. 浅谈C#委托的用法-delegate

    2018年11月7日     小雨 一.委托的概念 委托和类一样是一种用户自定义类型,它存储的就是一系列具有相同签名和返回类型的方法的地址,调用委托的时候,它所包含的所有方法都会被执行. 借用百度上的 ...

  10. pytest学习1-安装和入门

    一.安装pytest: 在命令行窗口下执行: pip install -U pytest 检查安装的pytest版本: pytest -v 二.运行第一个测试用例: import pytest def ...