【JavaScript】一个简单的分页,显示页首,中间页,页尾,当前页的前后三页,省略其它页

本文介绍了一种智能分页方案,该方案不仅展示了页首、页尾按钮,还展示了当前页的前后各三页,以及中间页,巧妙地使用省略号来隐藏不活跃页数,提升了用户体验。

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

有时候,比如共100页,并不一定要仅提供页首、页尾按钮,然后10页10页显示,

显示页首,中间页,页尾,当前页的前后三页,省略其它页也是一种不错的选择。

比如如下的分页:


首先,页面布局很简单,两个行内文本,一个显示当前的页数,与设定一个总页数。这里假定总页数共40页。

然后,用一个id="pagingDiv"的div放置分页链接。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>分页</title>
    </head>
    <body>
	第<span id="pagingText"></span>页,共<span id="total">40</span>页
    	<div id="pagingDiv"></div>
    </body>
</html>
关键是如下的脚本。

<script>
	//首先获取当前的总页数,一般是后台传递过来的,这里假定40页。
    var total = document.getElementById("total").innerHTML;
	//id="pagingDiv"的div通过pagingConstruct函数构造,比如加载网页是第1页的
    pagingConstruct(1);
	//形式参数paging是指当前页
    function pagingConstruct(paging){
		//先更新一下行内文本
        document.getElementById("pagingText").innerHTML = paging;
        var pagingDivInnerHTML = "";
		//这里是加载省略号的flag
        var isHiddenExist = 0;
		//从第1页读到第40页。
        for (var i = 1; i <= total; i++) {
			//如果读到当前页,就仅仅加载一个文本,不放链接
            if (i == paging) {
                pagingDivInnerHTML += i + " ";
            }
            else {
				//如果是页首,中间页,页尾,当前页的前后三页则不省略。
                if (i < 4 || i < (paging + 3) && i > (paging - 3) || i > (total / 2 - 2) && i < (total / 2 + 2) || i > (total - 3)) {
                    pagingDivInnerHTML += "<a href='javascript:void(0)' onclick='pagingConstruct(" + i + ")'>" + i + "</a> ";
                    isHiddenExist = 0;
                }
				//否则就构造...
                else {
                    if (isHiddenExist == 0) {
                        pagingDivInnerHTML += "...";
                        isHiddenExist = 1;
                    }
                }
            }
        }
		//把构造的内容放上去pagingDiv
        document.getElementById("pagingDiv").innerHTML = pagingDivInnerHTML;
    }
</script>
这个isHiddenExist的意思,是如果构造了一次...点点点,就不要再构造了。当你遇到不省略的内容之后,再构造...

<think>我们先创建一个简单的HTML结构,包含头(header)、导航栏(nav)、主要内容区域和(footer)。下面是一个基本的HTML5模板,按照要求包含这些部分。我们将使用内联样式进行简单美化,但为了保持简单,不会使用外部CSS。注意:实际开发中通常使用外部CSS文件,但这里为了简单,我们使用内联样式。结构如下:-头:通常包含网站的标题和logo。-导航栏:包含几个链接(例如:、关于、联系等)。-主要内容:放置一些示例内容,比如一个标题和段落。-:包含版权信息等。我们将使用一些基本的CSS样式来美化,使其看起来更整洁。</think>以下是一个简单的HTML面结构,包含头、导航栏和: ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>我的网站</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Microsoft YaHei', sans-serif; line-height: 1.6; } header { background-color: #2c3e50; color: white; text-align: center; padding: 1rem; } nav { background-color: #3498db; padding: 0.5rem; } nav ul { display: flex; justify-content: center; list-style: none; } nav li { margin: 0 15px; } nav a { color: white; text-decoration: none; padding: 5px 10px; transition: background 0.3s; } nav a:hover { background-color: #2980b9; border-radius: 3px; } main { padding: 2rem; min-height: 400px; } footer { background-color: #34495e; color: white; text-align: center; padding: 1rem; position: relative; bottom: 0; width: 100%; } </style> </head> <body> <!-- 头 --> <header> <h1>欢迎来到我的网站</h1> </header> <!-- 导航栏 --> <nav> <ul> <li><a href="#"></a></li> <li><a href="#">关于我们</a></li> <li><a href="#">服务</a></li> <li><a href="#">产品</a></li> <li><a href="#">联系我们</a></li> </ul> </nav> <!-- 主要内容 --> <main> <h2>网站内容标题</h2> <p>这里是网站的主要内容区域,可以放置文本、图片或其他元素。</p> </main> <!-- --> <footer> <p>© 2023 我的网站 版权所有</p> </footer> </body> </html> ``` ### 功能说明: 1. **头(header)**:深蓝色背景,白色标题文字 2. **导航栏(nav)**:蓝色菜单栏,包含水平排列的链接 3. **内容区域(main)**:白色背景的内容容器 4. **(footer)**:深灰色底部区域,包含版权信息 5. **响应式设计**:使用Flexbox实现导航栏的自适应布局 6. **交互效果**:导航链接有悬停变色效果
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值