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页码跳转类的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


原文地址:https://blog.csdn.net/xiao1zhao/article/details/1878993
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.chinasem.cn/article/796503

相关文章

用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优点:缺点:

Node.js 中 http 模块的深度剖析与实战应用小结

《Node.js中http模块的深度剖析与实战应用小结》本文详细介绍了Node.js中的http模块,从创建HTTP服务器、处理请求与响应,到获取请求参数,每个环节都通过代码示例进行解析,旨在帮... 目录Node.js 中 http 模块的深度剖析与实战应用一、引言二、创建 HTTP 服务器:基石搭建(一

使用Vue.js报错:ReferenceError: “Vue is not defined“ 的原因与解决方案

《使用Vue.js报错:ReferenceError:“Vueisnotdefined“的原因与解决方案》在前端开发中,ReferenceError:Vueisnotdefined是一个常见... 目录一、错误描述二、错误成因分析三、解决方案1. 检查 vue.js 的引入方式2. 验证 npm 安装3.

JS常用组件收集

收集了一些平时遇到的前端比较优秀的组件,方便以后开发的时候查找!!! 函数工具: Lodash 页面固定: stickUp、jQuery.Pin 轮播: unslider、swiper 开关: switch 复选框: icheck 气泡: grumble 隐藏元素: Headroom

在JS中的设计模式的单例模式、策略模式、代理模式、原型模式浅讲

1. 单例模式(Singleton Pattern) 确保一个类只有一个实例,并提供一个全局访问点。 示例代码: class Singleton {constructor() {if (Singleton.instance) {return Singleton.instance;}Singleton.instance = this;this.data = [];}addData(value)

Node.js学习记录(二)

目录 一、express 1、初识express 2、安装express 3、创建并启动web服务器 4、监听 GET&POST 请求、响应内容给客户端 5、获取URL中携带的查询参数 6、获取URL中动态参数 7、静态资源托管 二、工具nodemon 三、express路由 1、express中路由 2、路由的匹配 3、路由模块化 4、路由模块添加前缀 四、中间件