Js实现分页效果

最新推荐文章于 2024-07-01 11:34:43 发布
最新推荐文章于 2024-07-01 11:34:43 发布
阅读量747 收藏
点赞数
分类专栏： HTML/CSS JAVASCRIPT 文章标签： 分页 JavaScript

转自：http://js.alixixi.com/a/2010091464635.shtml

<html>
<head>
<meta http-equiv="content-Type" content="text/html;charset=gb2312">
<meta name="keywords" content="站长,网页特效,网页特效代码,js特效,js脚本,脚本,广告代码,zzjs,zzjs.net,www.zzjs.net,站长特效 网" />
<meta name="description" content="www.zzjs.net,站长特效网，站长必备js特效及广告代码。大量高质量js特效，提供高质量广告代码下载,尽在站长特效网" />
<title>网页特效 不错的分页效果 站长特效网欢迎您。</title>
<style type="text/css">
body{
 font-size:12px;
}
</style>
</head>
<body>
<a href="http://www.zzjs.net/">站长特效网</a>,站长必备的高质量网页特效和广告代码。zzjs.net，站长js特效。<hr>
<!--欢迎来到站长特效网，我们网站收集大量高质量js特效，提供许多广告代码下载，网址：www.zzjs.net，zzjs@msn.com,用.net打造靓站-->
<input type="button" value="分页" οnclick="initializePageNav(1)">
<div id="pageDir"></div>
<script language="JavaScript">
<!--
function initializePageNav(iCurrPage)
{
 var iPageSize = 20;
 var iProCount = 2121;
 var b = ((iProCount%iPageSize)!=0);
 var iPageCount = parseInt(iProCount/iPageSize)+(b?1:0);
 if (iCurrPage > iPageCount) return false;
 iCurrPage = parseInt(iCurrPage);
 var sTemp = "";
 var sTemp1 = "每页:"+ iPageSize +"/<span style='color:red'>"+ iProCount +"</span>条  页数:<span style='color:blue'>"+ iCurrPage +"</span>/"+ iPageCount +"页";
 var sTemp2 = "<input type=\"text\" id=\"goPageNo\" value=\""+iCurrPage+"\" size=\"3\" /><input type=\"button\" value=\"GO\" οnclick=\"initializePageNav($('goPageNo').value);\" />"
 if (iProCount==0)
 {
  sTemp = "<font color='#cccccc'>首页 上一页 下一页 末页</font>";
 }
 else if (iPageCount==1)
 {
  sTemp = "<font color='#cccccc'>首页 上一页 下一页 末页</font>"
 }//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
 else if (iPageCount==iCurrPage)
 {
  sTemp = "<a href='Javascript:initializePageNav(1)'>首页</a> <a href='Javascript:initializePageNav("+(iPageCount-1)+")'>上一页</a> <font color='#cccccc'>下一页 末页</font>"
 }
 else if (iCurrPage==1)
 {
  sTemp = "<font color='#cccccc'>首页 上一页 </font><a href='Javascript:initializePageNav("+(iCurrPage+1)+")'>下一页</a> <a href='Javascript:initializePageNav("+iPageCount+")'>末页</a>"
 }
 else
 {
  sTemp = "<a href='Javascript:initializePageNav(1)'>首页</a> <a href='Javascript:initializePageNav("+(iCurrPage-1)+")'>上一页</a> <a href='Javascript:initializePageNav("+(iCurrPage+1)+")'>下一页</a> <a href='Javascript:initializePageNav("+(iPageCount)+")'>末页</a>"
 }
 $("pageDir").innerHTML = sTemp +"  "+ sTemp2 + "  " + sTemp1 ;
 CollectGarbage();
}
function $(o)
{
 return document.getElementById(o);
}//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
initializePageNav(1)
//-->
</script>
</body>
</html>

清风段
关注
专栏目录
原生JS实现分页效果
越陌度阡
07-18 3012
做开发久了，会越来越依赖框架，毕竟利用框架可以快速的完成工作任务，如常见的分页效果，只需要与后端配合，由后端返回总页数和当前第几页这两个参数传给一些框架的分页功能，就可以轻松的实现分页效果，那如果在不依赖框的情况下利用原生JS如何实现一个分页效果呢？接下来给大家分享一段分页代码实现下面的效果。 <!DOCTYPE html> <html> <head>.........
Javascript表格翻页效果实现思路及代码
转角遇到她的专栏
08-24 1557
表格翻页的实现方式有很多，下面以js为例为大家详细介绍下表格翻页效果的具体实现。 表格翻页---www.jbxue.com body, td{ font-size: 9pt; } a:link { color: #FF0000; } a:visited { color: #FF0000; } a:hover { color: #006600; } <!-- var record =
html分页效果,JavaScript实现分页效果
weixin_39618173的博客
06-03 397
初学前端不久，第一次写文章，希望大佬多多指教，谢谢！！目的：实现一个分页点击事件的js组件特效，效果如下：录gif的软出了点问题，感觉鼠标不移动代码实现：html代码：加上css后效果：因为每次选中的页面在中间，则吧中间设置一个点击的classJS实现：function Paging(list_num,ali,btn){this.list_num=list_num;this.ali=ali;thi...
原生js实现分页的效果
冰雪为融的博客
03-18 4290
想必大家都用过百度查找过我们想要的信息，每次我们查找东西的时候，百度都会返给我们很多很多相似和有关的结果，而这些结果是不可能一页就显示完全的，一般都会分很多很多页，效果图如下。所以我们今天就是要分享一下，这个分页效果是怎么实现的。首先我们观察这个分页一页中显示的页码数是固定的当当期页码大于等于2的时候，开始显示‘上一页’按钮，当总页数比当前显示的页码大于等于1的时候，开始显示'下一页'按钮的按钮如...
javascript实现分页效果
前端岚枫
06-18 2987
一般的页面我们实现分页效果都是用跳转的形式，但是有些需求需要我们在不跳转页面的同时完成分页效果，简单的一个实现例子：window.onload = function(){ page({ id:'pageBox', nowNum:7, allNum:10, callbac
js实现分页
w5206666的博客
04-08 3966
js实现分页 方式一： 1、html页面 <!-- 下面要展示的代码 --> <div id="commentDiv"> <div> {% for comment in comment_list %} <div class="col-12 list row"> <div class="col-2 icon"> <img src="/avatar/{
前端实现分页效果
热门推荐
welcome
09-09 1万+
前端分页？后端做得了的事，我前端也要做。后端做不了的事，我前端更要做。
用JavaScript实现分页功能
qq_52530691的博客
07-01 1741
用JavaScript实现分页功能
JS前端实现分页效果
m0_67198021的博客
03-28 316
前端实现分页效果，采用html+css+js实现
原生JS实现分页效果1.0
u011927449的博客
08-08 165
不太完整，写的太急，等等加上完整注释，写起来还是有些难度的，写的有点水，后面再改进改进。 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>原生JS实现分页效果</title> <style> body{ margin:100px 200px; } #page{ margin:20px 0; } #page>#pre
JavaScript实现分页效果
10-20
JavaScript实现分页效果是网页开发中的常见需求，特别是在数据量较大、需要分批加载内容时。本示例通过JavaScript和CSS实现了一个简单的分页组件，适用于动态数据展示和用户交互。 首先，HTML结构中包含了分页组件...
原生javascript实现分页效果
10-19
本文将详细介绍如何使用原生JavaScript实现分页效果，这种方法不依赖于任何第三方框架，仅使用纯JavaScript代码来完成分页逻辑和UI的构建。 首先，了解分页实现的基本原理是必要的。分页通常涉及到以下几个核心部分...
原生js实现分页效果
10-14
总的来说，原生JavaScript实现分页效果涉及的主要技术点包括DOM操作、事件监听、数据处理和用户交互。通过理解上述代码和流程，开发者可以构建自己的分页组件，适应各种项目需求。同时，为了增强用户体验，还可以...
基于jquery.page.js实现分页效果
10-18
基于jquery.page.js实现分页效果的要点包括以下几个方面： 1. 引言：随着Web应用的普及，处理大量数据并以用户友好的方式展示变得越来越重要。分页是一种常用的技术，它将大量数据分割到不同的页面中，使用户可以逐...
JS实现分页效果代码.zip
07-04
总之，这个资源提供了JavaScript实现分页效果的基础，开发者可以根据说明.htm中的指导，结合实际项目需求，通过jiaoben18004.js文件中的代码来定制自己的分页功能。对于学习JavaScript和前端开发的人员来说，这是一...
沈阳建筑大学在河南2021-2024各专业最低录取分数及位次表.pdf
最新发布
09-16
全国各大学在河北2021-2024年各专业最低录取分数及录取位次数据，高考志愿必备参考数据
贵州茅台数据(1).xlsx
09-16
贵州茅台数据(1)
cwgl_jy1301.doc
09-16
cwgl_jy1301.doc
java-ssm+jsp游戏账号交易系统实现源码(项目源码-说明文档)
09-16
登录进入游戏账号交易系统可以查看系统用户管理，用户信息管理，海洋新闻管理，海鲜信息管理，购买信息管理，订退单信息管理和系统管理首页、个人中心、卖家管理、用户管理、游戏类别管理、手续费用管理、地下城与勇士管理、地下城账号购买、地下城账号换绑管理、地下城账号申诉管理、地下城私信聊天管理、地下城私信回复管理、英雄联盟管理、英雄联盟购买管理 项目关键技术 开发工具：IDEA 、Eclipse 编程语言: Java 数据库: MySQL5.7+ 后端技术：ssm 前端技术：jsp 关键技术：jsp、spring、ssm、MYSQL、MAVEN 数据库工具：Navicat、SQLyog
Vue.js 实现分页效果详解
"这篇文章主要介绍了在Vue框架下实现分页功能的三种不同方法，适合对Vue.js有一定了解并希望在项目中实现分页效果的开发者参考。提供的代码示例详细展示了每种方法的实现步骤，有助于读者快速理解和应用。" 在前端...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值