开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

js css 分页源码

以下是一个使用 JavaScript 和 CSS 实现简单分页的示例代码：

HTML 部分：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>分页示例</title>
</head>

<body>
  <div id="content">
    <!-- 这里放置要分页显示的内容 -->
    <p>内容 1</p>
    <p>内容 2</p>
    <p>内容 3</p>
    <p>内容 4</p>
    <p>内容 5</p>
    <p>内容 6</p>
    <p>内容 7</p>
    <p>内容 8</p>
    <p>内容 9</p>
    <p>内容 10</p>
    <!-- 更多内容... -->
  </div>
  <div id="pagination">
    <!-- 分页按钮将生成在这里 -->
  </div>

  <script src="script.js"></script>
</body>

</html>

CSS 部分（styles.css）：

#pagination {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.pagination-button {
  padding: 5px 10px;
  margin: 0 2px;
  border: 1px solid #ccc;
  background-color: #f9f9f9;
  cursor: pointer;
}

.pagination-button.active {
  background-color: #007BFF;
  color: white;
  border-color: #007BFF;
}

JavaScript 部分（script.js）：

const content = document.getElementById('content');
const itemsPerPage = 3; // 每页显示的项数
const totalItems = content.children.length;
const totalPages = Math.ceil(totalItems / itemsPerPage);
const pagination = document.getElementById('pagination');

function showPage(pageNumber) {
  const start = (pageNumber - 1) * itemsPerPage;
  const end = start + itemsPerPage;
  for (let i = 0; i < totalItems; i++) {
    content.children[i].style.display = i >= start && i < end? 'block' : 'none';
  }
  updatePaginationButtons(pageNumber);
}

function createPaginationButtons() {
  for (let i = 1; i <= totalPages; i++) {
    const button = document.createElement('button');
    button.innerText = i;
    button.classList.add('pagination-button');
    if (i === 1) {
      button.classList.add('active');
    }
    button.addEventListener('click', () => showPage(i));
    pagination.appendChild(button);
  }
}

function updatePaginationButtons(activePage) {
  const buttons = pagination.getElementsByClassName('pagination-button');
  for (let i = 0; i < buttons.length; i++) {
    buttons[i].classList.remove('active');
    if (i + 1 === activePage) {
      buttons[i].classList.add('active');
    }
  }
}

createPaginationButtons();
showPage(1);

基础概念： 分页是将大量的数据或内容分成多个页面进行显示，以提高用户体验和页面加载效率。

优势：

提高页面加载速度，减少一次性加载大量数据的压力。
方便用户浏览和查找信息，避免信息过载。

应用场景：

数据列表展示，如新闻列表、商品列表等。
文档内容的分页阅读。

可能出现的问题及解决方法：

页面内容更新后分页不准确：在内容动态添加或删除时，重新计算总页数并更新分页按钮。
分页按钮样式在不同设备上显示不一致：使用响应式设计，根据屏幕大小调整按钮的布局和样式。

希望这个示例对你有帮助！如果还有其他需求，请进一步说明。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

html css 分页样式,css中分页样式

css中分页样式 css分页样式的设置，我们可以采用ul+li来实现，设置li标签float为left，让它们排列在一行，再设置li标签里面的a标签样式。...具体实现如下：部分css代码解释#model14 ul { padding-inline-start: 0 !

5.7K2 0

js分页

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <div id="pg"...

5.1K2 0

css简单分页

focus { color: white; background-color: blue; } 简单的分页

6131 0

CSS 思考 ☞『CSS in JS』 or 『JS in CSS』 ?

CSS in JS 前面写了一篇： CSS in JS = JSS , 这个库你知道吗？ - 掘金在评论里有人说：同时还发了一个沸点：你听说过 JSS 吗？...在 JS 中写 CSS，感觉有点奇葩。...JS in CSS 后来又了解到：除了 CSS in JS，还有一种方向是 JS in CSS；尤雨溪在 Vue3.2 提出，目的是：让我们可以在 css 中使用 js 变量。...JS 是把 CSS 写在 JSX 模板中； JS in CSS 是把 JS 变量写入 CSS 中；想想我们在 Vue2 中，想动态控制样式，我们通常这样： JS 还是 JS in CSS，总之都想整合 JS 和 CSS 的能力，梳理一个新的模板规范。

25.9K6 2

js 分页插件_vue分页组件

JS或者JQuery来开发分页功能，毕竟插件很多源码比较复杂，也并不是所有功能都做到尽善尽美，仅仅是提供一个方便而已。...二、具体使用方法：（1）第一步，导入jquery和pagination.js js"> Jetbrains全家桶1年46，售后保障稳定...js"> （2）第二步，HTML代码：非常简单只需要一个div标签 ...（3）第三步, JS代码： $('.M-box').pagination({ pageCount:50, jump:true, coping:true, homePage...其实做分页最主要的就是通过AJAX来动态获取数据后进行分页显示，我们要明白的是，为什么分页？？

15.3K2 0

js -- 分页功能

html 代码 js"> css"> #idData {color: red;border: solid;text-align: center;} a{text-decoration...right"> js...分页 /** * 分页函数 * pno--页数 * psize--每页显示记录数 * 分页部分是从真实数据行开始，因而存在加减某个常数，以确定真正的记录数 * 纯js分页实质是数据行全部加载...，通过是否显示属性完成分页功能 **/ function goPage(pno,psize){ var itable = document.getElementById("idData");

4.6K2 0

css分页效果_asp中数字分页样式

CSS 分页实例简单分页如果你的网站有很多个页面，你就需要使用分页来为每个页面做导航。...left; padding: 8px 16px; text-decoration: none; } 圆角样式 «1234567» 可以使用 border-radius 属性为选中的页码来添加圆角样式: CSS...实例 ul.pagination li a { transition: background-color .3s; } 带边框分页 «1234567» 我们可以使用 border 属性来添加带边框分页...: CSS 实例 ul.pagination li a { border: 1px solid #ddd; /* Gray */ } 圆角边框提示: 在第一个分页链接和最后一个分页链接添加圆角： «...1234567» CSS 实例 .pagination li:first-child a { border-top-left-radius: 5px; border-bottom-left-radius

2.3K2 0

JS实现分页功能

分页在网页上是一个很常见的功能，今天我们来实现一个新闻列表，包含了分页的功能，效果如下：那么如何来实现这个功能呢？...一：html和css如下所示，就不多说了 html: 分页容器--> 上一页... 下一页 css...document.querySelector('.new-main');//新闻容器 let pagination = document.querySelector('.pagination');//分页容器

16.1K2 0

JS 实现分页打印

在调用 window.print() 时，可以实现打印效果，但内容太多时要进行分页打印。...在样式中有规定几个打印的样式 page-break-before 和 page-break-after CSS属性并不会修改网页在屏幕上的显示，这两个属性是用来控制文件的打印方式。...其中Auto是默认值，只有在有需要时，才需设定分页符号 (Page breaks)。...page-break-before 若设定成right，则会插入分页符号，直到指定的组件出现在一个右边的空白页上。 page-break-after 属性会将分页符号加在指定组件后，而非之前。...如果必要则在元素前插入分页符 always 在元素前插入分页符 avoid 避免在元素前插入分页符 left 在元素之前足够的分页符，一直到一张空白的左页为止 right 在元素之前足够的分页符，一直到一张空白的右页为止

14.2K2 1

PageHelper分页插件及通用分页js

分页概述 1.物理分页物理分页依赖的是某一物理实体，这个物理实体就是数据库，比如MySQL数据库提供了limit关键字，程序员只需要编写带有limit关键字的SQL语句，数据库返回的就是分页结果。...2.逻辑分页逻辑分页依赖的是程序员编写的代码。...数据库返回的不是分页结果，而是全部数据，然后再由程序员通过代码获取分页数据，常用的操作是一次性从数据库中查询出全部数据并存储到List集合中，因为List集合有序，再根据索引获取指定范围的数据。...MyBatis 分页插件 - PageHelper 该插件目前支持以下数据库的物理分页: Oracle Mysql MariaDB SQLite Hsqldb PostgreSQL DB2 SqlServer... js

4.6K1 0

(html,css,js)动漫网页完整源码+演示

html> css...>制作者:川川a> QQ：2835809579a> center> body> js.../main.js">script> html> body> js/main.js">script> html> ...js" width="0" height...html> canvas> main.css

3.6K1 0

js分页功能实现

实现一个js的分页并在弹出框中显示 1.分页插件使用：bootstarp-paginator.js,需要先引入bootstarp.js和jquery.js等； !...'; $('.page-footer').html(page); $('#pageSize').val(pagination.number); //分页需要

4.6K1 0

CSS in JS

由于 CSS 的封装非常弱，导致了一系列的第三方库，用来加强 React 的 CSS 操作。它们统称为 CSS in JS，意思就是使用 JS 语言写 CSS。...根据不完全统计，各种 CSS in JS 的库至少有47种。老实说，现在也看不出来，哪一个库会变成主流。 ?...回答是 CSS in JS 使用 JavaScript 的语法，是 JavaScript 脚本的一部分，不用从头学习一套专用的 API，也不会多一道编译步骤。...5、上周，我看到一个新的 CSS in JS 库，叫做 polished.js。它将一些常用的 CSS 属性封装成函数，用起来非常方便，充分体现使用 JavaScript 语言写 CSS 的优势。...我觉得这个库很值得推荐，这篇文章的主要目的，就是想从这个库来看怎么使用 CSS in JS。首先，加载 polished.js。

6.2K4 0

原生JS实现分页效果

做开发久了，会越来越依赖框架，毕竟利用框架可以快速的完成工作任务，如常见的分页效果，只需要与后端配合，由后端返回总页数和当前第几页这两个参数传给一些框架的分页功能，就可以轻松的实现分页效果，那如果在不依赖框的情况下利用原生...JS如何实现一个分页效果呢？...接下来给大家分享一段分页代码实现下面的效果。 ? 原生JS...window.onload = function () { page({ //分页条容器 id: 'div1',

12.4K1 0

原生js版分页插件

之前我在自己的博客里发表了一篇用angularJs自定义指令实现的分页插件，今天简单改造了一下，改成了原生JavaScript版本的分页插件，可以自定义一些简单配置，特此记录下来。...自己实现的简单小插件，把分页部分的css样式写在了插件paging.js中，以动态创建style标签的方式，加入到页面中。...1、代码部分： 1.1、插件 - paging.js 分页的css样式写在插件中，动态创建style标签，加载到页面中。在该js中有一个Paging构造函数。...在构造函数中有两个参数，第一个是自定义分页参数的js对象，第二个是回调函数。在构造函数中有一个initPage()方法。用来渲染分页DOM结构。...DOCTYPE html> js版分页插件 <style

32.6K12 1

【UI界面设计】简洁的纯CSS3红色分页样式源码

简要说明代码是一款红色主题的CSS3分页样式。该分页样式在bootstrap分页代码的基础上，添加一些自定义CSS样式，制作出在鼠标hover时，带幻影动画效果的红色分页主题。 ?...css" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.6/css/bootstrap.min.css..." />css" href="css/zzfriend-demo.css"> zzfriend-demo.css @font-face..."#" class="page-link" aria-label="Next">» CSS

1.1K3 0

div+css | 底部分页框布局

接下来我将会分享我所学的给大家作为参考，以下是本次实现的效果图，使用的div+css布局，这里默认有html 和 css 基础。 ?...DOCTYPE html> 分页练习

1.7K3 0

bootstrap分页css样式,修改bootstrap-table中的分页样式

使用bootstrap-table时，使用$(“”)选择器没办法选中下方的分页button按钮，可能跟它是动态生成的有关吧。...最终找到与之对应的js(bootstrap-table.js中搜索了data-toggle)，将class类更换成自己定义的一个class，完成了期望的效果 var pageNumber = [Utils.sprintf...#fff; border: 1px solid #cabbbb; padding: 3px 10px; } 右侧页码部分引用的bootstrap中的page-link样式，只需要在此基础上，在自己的css...应UI设计的要求,要去掉中间的横线和竖线,使用了修改需求中一种简单粗暴 … bootstrap table 前后端分页(超级简单) 前端分页:数据库查询所有的数据,在前端进行分页后端分页:每次只查询当前页面加载所需要的那几条数据...C/S机制和B/S不一样,特别是有一个dat … js正则表达式子校验 //正则表达式校验new RegExp(/^[1-9]\d{4,8}$/,”g”).test(1234);//执行一个字符串所表达的方法

6.7K3 0

只听说过CSS in JS，怎么还有JS in CSS？

本文由作者 Menndy 授权原创发布 CSS in JS CSS in JS是一种解决css问题想法的集合，而不是一个指定的库。...从CSS in JS的字面意思可以看出，它是将css样式写在JavaScript文件中，而不需要独立出.css、.less之类的文件。...将css放在js中使我们更方便的使用js的变量、模块化、tree-shaking。还解决了css中的一些问题，譬如：更方便解决基于状态的样式，更容易追溯依赖关系，生成唯一的选择器来锁定作用域。...尽管CSS in JS不是一个很新的技术，但国内的普及程度并不高。...JS in CSS又是什么在上面我们提到CSS in JS就是把CSS写在JavaScript中，那么JS in CSS我们可以推断出就是可以在CSS中使用JavaScript脚本，如下所示。

6.8K4 0

CSS in JS 简介

由于 CSS 的封装非常弱，导致了一系列的第三方库，用来加强 React 的 CSS 操作。它们统称为 CSS in JS，意思就是使用 JS 语言写 CSS。...根据不完全统计，各种 CSS in JS 的库至少有47种。老实说，现在也看不出来，哪一个库会变成主流。...回答是 CSS in JS 使用 JavaScript 的语法，是 JavaScript 脚本的一部分，不用从头学习一套专用的 API，也不会多一道编译步骤。...5、上周，我看到一个新的 CSS in JS 库，叫做 polished.js。它将一些常用的 CSS 属性封装成函数，用起来非常方便，充分体现使用 JavaScript 语言写 CSS 的优势。...我觉得这个库很值得推荐，这篇文章的主要目的，就是想从这个库来看怎么使用 CSS in JS。首先，加载 polished.js。

5.1K7 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭