原生JS实现一个分页点击控件

最新推荐文章于 2024-05-11 21:58:00 发布

吸猫一时爽

最新推荐文章于 2024-05-11 21:58:00 发布

阅读量986

点赞数 1

分类专栏： JavaScript常用函数

本文链接：https://blog.youkuaiyun.com/weixin_38422174/article/details/92745997

版权

这篇博客介绍了一个面试题目，要求用原生JavaScript实现一个分页组件。该组件包含首页、上一页、下一页、末页按钮，以及一个输入框供用户直接输入页码。当处于第一页时，首页和上一页按钮禁用；当处于最后一页时，下一页按钮禁用。文章详细阐述了如何实现这个功能，并展示了最终效果。

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

这是一个面试题,要求使用原生JS实现一个分页点击控件,

点击首页、上一页、下一页和末页要实现相应的数字编号变红。
在页数1 不能够点击首页和上一页。
在页数10不能够点击下一页。
实现一个input输入页数跳转页码功能。

HTML

<!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>Page</title>
    <style>
        *{
            margin: 0px;
            list-style-type: none;
        }
        header,footer,section{
            box-sizing: border-box;
            text-align: center;
            padding: 5px;
        }
        header,footer{
            background-color: aquamarine;
            font-size: 25px;
        }
        #content{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            flex-wrap: nowrap;
            height: 500px;
            background-color: antiquewhite;
        }
        .content{
            border: 1px dotted saddlebrown;
            min-width: 700px;
            min-height: 440px;
            background-color: darkcyan;
        }
        #changePage li{
            display: inline-block;
        }
        .now{
            color:red;
        }
        .hide{
            display: hidde

最低0.47元/天解锁文章