原生JS实现分页效果

艾光远

已于 2025-03-16 23:44:44 修改

阅读量3.1k

点赞数 5

CC 4.0 BY-SA版权

分类专栏： JavaScript网页特效文章标签：前端开发 JavaScript

于 2019-07-18 22:25:12 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_40629244/article/details/96461580

JavaScript网页特效专栏收录该内容

77 篇文章 ¥19.90 ¥99.00

订阅专栏

超级会员免费看

这篇博客探讨了在不依赖前端框架的情况下，如何使用原生JavaScript来实现分页效果。作者指出，虽然框架能简化开发，但理解原生实现有助于提升技能。文中分享了一段代码，用于创建具有基本功能的分页组件。

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

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

<!DOCTYPE html>
<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>原生JS实现分页效果</title>
        <style>
            a {
                margin: 5px;
            }
        </style>
    </head>

    <body>
        <div id="pagination"></div>
        <script>

            window.onload = function () {
                page({