ByVal没事做写的JS页码跳转类

2024-03-11 03:40
文章标签 js 跳转 页码 没事 byval

本文主要是介绍ByVal没事做写的JS页码跳转类,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

转自---〉大大IT__歇脚处--霍健伟

都是高人 

 

学习下,学习js类的写法,从而映射到java类的写法,不知道自己的想法正确不?

=====

ByVal没事做写的JS页码跳转类

几乎所有样式皆可依据对几个HTML原型属性的赋值变化而变化.提供了超级自由的属性以供设置风格代码未优化.

 

< span  id ="viewlayer" ></ span >

< script  language ="JavaScript" >
function Page(){
     
this.size;            //当前页两侧伸展页数
     this.PageSize;            //每页记录数
     this.style;            /* 统计信息HTML原型代码
                       元素对应:记录总数:"{$count}".总页数:"{$pagecount}".每页记录数:"{$pagesize}".当前页码:"{$pagenum}"
                       
*/


     
this.liststyle;            /* 页码列表HTML原型代码,规则形式,
                       将被分割成一个6个元素的数组.
                       例如为"首页|上一页|下一页|尾页|当前页码|普通页码"样子的HTML代码
                       以"{$pagenum}"为页码元素,处理后此位置则为页码值
                       如果有一项或多项为空仍需预留位置,如"首页|||尾页|当前页码|普通页码" 
*/

     
this.jumpstyle;            //自由跳转HTML原型代码
     this.count;            //总记录数
     this.urlstyle;            //附加页码前的链接代码及样式.以"{$page}"为页码元素,处理后此位置则为此链接页码值."{$location}"为链接文本元素
     this.listurlstyle;      //附加页码前的链接代码及样式(使用于页码列表).以"{$page}"为页码元素,处理后此位置则为此链接页码值."{$location}"为链接文本元素
     this.locationPage = 1;      //当前页码
     this.jumpurl;            //自由跳转的URL前缀
     this.ParName = "page";      //页码的URL参数名

     
this.CreateMain = function(){
           
if(this.style==null){
                 
return("缺少页码样式");
           }
else{
                 
var temp
                 
var pageCount
                 
if(this.count%this.PageSize!=0){
                       pageCount 
= parseInt(this.count / this.PageSize) + 1;
                 }
else{
                       pageCount 
= parseInt(this.count / this.PageSize);
                 }

                 
if(this.locationPage>pageCount) this.locationPage = pageCount;
                 temp 
= this.style;
                 temp 
= temp.replace("{$count}",this.count);
                 temp 
= temp.replace("{$pagecount}",pageCount);
                 temp 
= temp.replace("{$pagesize}",this.PageSize);
                 temp 
= temp.replace("{$pagenum}",this.locationPage);
                 
return(temp);
           }

     }


     
this.CreateList = function(){
           
if(this.liststyle==null){
                 
return("缺少页码样式");
           }
else{                  
                 
if(this.count%this.size!=0){
                       ALLPageCount 
= parseInt(this.count / this.PageSize) + 1;
                 }
else{
                       ALLPageCount 
= parseInt(this.count / this.PageSize);
                 }

                 
if(this.locationPage>ALLPageCount) this.locationPage = ALLPageCount;
                 
var temp
                 
var returnTemp = "";
                 
var returnstr = "";
                 temp 
= this.liststyle;
                 temp 
= temp.split("|");
                 
if(temp.length<6return("页码列表样式定义错误");
                 
if(temp[0]!=""&&this.locationPage>1){
                       returnTemp 
+= this.urlstyle;
                       returnTemp 
= returnTemp.replace("{$page}",1);
                       returnTemp 
= returnTemp.replace("{$location}",temp[0]);
                 }

                 
if(temp[1]!=""&&this.locationPage>1){
                       returnTemp 
+= this.urlstyle;
                       returnTemp 
= returnTemp.replace("{$page}",this.locationPage - 1);
                       returnTemp 
= returnTemp.replace("{$location}",temp[1]);
                 }

                 
if(temp[5]!=""){
                       
var start = this.locationPage - this.size;
                       
var end = this.locationPage + this.size;
                       
var looptemp = "";
                       
if(start<1) start = 1;
                       
if(end-start<this.size*2) end = start + this.size * 2;
                       
if(end>ALLPageCount) end = ALLPageCount;
                       
for(var i=start;i<=end;i++){
                             looptemp 
+= this.listurlstyle;
                             
if(i==this.locationPage&&temp[4]!=""){
                                   looptemp 
= looptemp.replace("{$location}",temp[4]);      
                             }
else{
                                   looptemp 
= looptemp.replace("{$location}",temp[5]);
                             }

                             looptemp 
= looptemp.replace("{$page}",i);
                             looptemp 
= looptemp.replace("{$pagenum}",i);
                       }

                             returnTemp 
+= looptemp;
                 }

                 
if(temp[2]!=""&&this.locationPage<ALLPageCount){
                       returnTemp 
+= this.urlstyle;
                       returnTemp 
= returnTemp.replace("{$page}",this.locationPage + 1);
                       returnTemp 
= returnTemp.replace("{$location}",temp[2]);
                 }

                 
if(temp[3]!=""&&this.locationPage<ALLPageCount){
                       returnTemp 
+= this.urlstyle;
                       returnTemp 
= returnTemp.replace("{$page}",ALLPageCount);
                       returnTemp 
= returnTemp.replace("{$location}",temp[3]);
                 }

                 
return(returnTemp);
           }

     }

     
this.CreateFreejump = function(){
           
var temp = this.jumpstyle;
           
if(temp==nullreturn("缺少页码样式");

           temp 
= temp.replace("{$page}",this.locationPage)
           
return(temp);
     }

     
this.ChangePage = function(){
           
var GotoPage = document.all.PageValue.value;
           
var ALLPageCount = 0;
           
if(GotoPage!=null&&GotoPage!=""){
                 GotoPage 
= parseInt(GotoPage);
                 
if(this.count%this.size!=0){
                       ALLPageCount 
= parseInt(this.count / this.PageSize) + 1;
                 }
else{
                       ALLPageCount 
= parseInt(this.count / this.PageSize);
                 }

                 
if(GotoPage>0&&GotoPage<ALLPageCount) location.href=this.jumpurl + this.ParName + "=" + GotoPage;
           }

     }

     
this.GetPage = function(){
           
var str = this.ParName + "=";
           
var gvalue = 1;
           
if(location.href.indexOf(str)>0){
                 gvalue 
= location.href.substring(location.href.indexOf(str) + str.length,location.href.length);
                 
if(gvalue.indexOf('&')>0) gvalue = gvalue.substring(0,gvalue.indexOf('&'));
                 
if(gvalue="/="") gvalue = 1;
           }
           return(parseInt(gvalue));
     }
}

//使用实例
var P = new Page();
P.ParName = 
"page";
P.size = 5;
P.PageSize = 10;
P.count = 144532;
P.jumpurl = 
"msn.htm?";
P.locationPage = P.GetPage();

P.style = 
"共有{$count}条记录.共分{$pagecount}页.每页{$pagesize}条.当前第{$pagenum}页. ";
P.liststyle = 
"首页|<<|>>|末页|<font color=red><b>{$pagenum}</b></font>|<b>{$pagenum}</b>";
P.urlstyle = 
" <a href="msn.htm?page={$page}">{$location}</a> ";
P.listurlstyle 
= " [ <a href="msn.htm?page={$page}">{$location}</a> ] ";
P.jumpstyle 
= "<input type="text" size="5" value="{$page}" name="PageValue"> <input type=button value="跳转" οnclick="P.ChangePage()">";
viewlayer.innerHTML 
= P.CreateMain() + P.CreateList() + P.CreateFreejump();

</ script >

这篇关于ByVal没事做写的JS页码跳转类的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/796503

相关文章

使用Python获取JS加载的数据的多种实现方法

《使用Python获取JS加载的数据的多种实现方法》在当今的互联网时代,网页数据的动态加载已经成为一种常见的技术手段,许多现代网站通过JavaScript(JS)动态加载内容,这使得传统的静态网页爬取... 目录引言一、动态 网页与js加载数据的原理二、python爬取JS加载数据的方法(一)分析网络请求1

VSCode中配置node.js的实现示例

《VSCode中配置node.js的实现示例》本文主要介绍了VSCode中配置node.js的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着... 目录一.node.js下载安装教程二.配置npm三.配置环境变量四.VSCode配置五.心得一.no

JS+HTML实现在线图片水印添加工具

《JS+HTML实现在线图片水印添加工具》在社交媒体和内容创作日益频繁的今天,如何保护原创内容、展示品牌身份成了一个不得不面对的问题,本文将实现一个完全基于HTML+CSS构建的现代化图片水印在线工具... 目录概述功能亮点使用方法技术解析延伸思考运行效果项目源码下载总结概述在社交媒体和内容创作日益频繁的

Node.js 数据库 CRUD 项目示例详解(完美解决方案)

《Node.js数据库CRUD项目示例详解(完美解决方案)》:本文主要介绍Node.js数据库CRUD项目示例详解(完美解决方案),本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考... 目录项目结构1. 初始化项目2. 配置数据库连接 (config/db.js)3. 创建模型 (models/

使用Node.js制作图片上传服务的详细教程

《使用Node.js制作图片上传服务的详细教程》在现代Web应用开发中,图片上传是一项常见且重要的功能,借助Node.js强大的生态系统,我们可以轻松搭建高效的图片上传服务,本文将深入探讨如何使用No... 目录准备工作搭建 Express 服务器配置 multer 进行图片上传处理图片上传请求完整代码示例

用js控制视频播放进度基本示例代码

《用js控制视频播放进度基本示例代码》写前端的时候,很多的时候是需要支持要网页视频播放的功能,下面这篇文章主要给大家介绍了关于用js控制视频播放进度的相关资料,文中通过代码介绍的非常详细,需要的朋友可... 目录前言html部分:JavaScript部分:注意:总结前言在javascript中控制视频播放

Node.js net模块的使用示例

《Node.jsnet模块的使用示例》本文主要介绍了Node.jsnet模块的使用示例,net模块支持TCP通信,处理TCP连接和数据传输,具有一定的参考价值,感兴趣的可以了解一下... 目录简介引入 net 模块核心概念TCP (传输控制协议)Socket服务器TCP 服务器创建基本服务器服务器配置选项服

mac安装nvm(node.js)多版本管理实践步骤

《mac安装nvm(node.js)多版本管理实践步骤》:本文主要介绍mac安装nvm(node.js)多版本管理的相关资料,NVM是一个用于管理多个Node.js版本的命令行工具,它允许开发者在... 目录NVM功能简介MAC安装实践一、下载nvm二、安装nvm三、安装node.js总结NVM功能简介N

前端原生js实现拖拽排课效果实例

《前端原生js实现拖拽排课效果实例》:本文主要介绍如何实现一个简单的课程表拖拽功能,通过HTML、CSS和JavaScript的配合,我们实现了课程项的拖拽、放置和显示功能,文中通过实例代码介绍的... 目录1. 效果展示2. 效果分析2.1 关键点2.2 实现方法3. 代码实现3.1 html部分3.2

JS 实现复制到剪贴板的几种方式小结

《JS实现复制到剪贴板的几种方式小结》本文主要介绍了JS实现复制到剪贴板的几种方式小结,包括ClipboardAPI和document.execCommand这两种方法,具有一定的参考价值,感兴趣的... 目录一、Clipboard API相关属性方法二、document.execCommand优点:缺点: