effect_javascript 기술을 전환하는 js 페이징 코드-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

effect_javascript 기술을 전환하는 js 페이징 코드

PHP中文网

May 16, 2016 pm 06:52 PM

로딩하는데 시간이 좀 걸리니 잠시만 기다려주세요.

<!-- 
/* vim: set expandtab tabstop=4 shiftwidth=4 softtabstop=4: */ 
/** 
* 用js分页显示ul/ol的列表 
* 
* 这里的演示设置了自动滚动 
* 
* PHP versions 4 and 5 
* 
* LICENSE: This source file is subject to version 3.0 of the PHP license 
* that is available through the world-wide-web at the following URI: 
* <a rel="nofollow" href="http://www.php.net/license/3_0.txt." target="_blank">http://www.php.net/license/3_0.txt.</a> If you did not receive a copy of 
* the PHP License and are unable to obtain it through the web, please 
* send a note to license@php.net so we can mail you a copy immediately. 
* 
* @package GCCMS 
* @author Yi Bo <etng2004@gmail.com> 
* @copyright 2000-2005 GCSOFT.COM & ETNG.NET 
* @license <a rel="nofollow" href="http://www.php.net/license/3_0.txt" target="_blank">http://www.php.net/license/3_0.txt</a> PHP License 3.0 
* @version SVN: $Id: page.html 21 2006-01-22 09:35:58Z etng $ 
* @link $HeadURL: svn://dev.gccms.net/trunk/page.html $ 
* @see 
* @since 
*/ 
--><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>无标题文档</title> 
<style type="text/css"> 
<!-- 
/*这里填写自己需要的css定义*/ 
body { width: 760px; padding: 0 0 0 0; margin: 0 auto 0 auto; font-size: 12px; font-family: "Arial", "Helvetica", "sans-serif"; } 
td { font-size: 12px; } 
ul,li,form,p,span { padding: 0 0 0 0; margin: 0 0 0 0; } 
.ctrlPages {COLOR: #f60;cursor:hand;} 
.curPage {COLOR: #f00;cursor:hand;} 
--> 
</style> 
<script language="JavaScript"> 
<!-- 
var ETNGpager = function( srcName, dstName, cntPP, cntPS ) 
{ 
this.srcName= srcName; 
this.dstName= dstName; 
this.curP= 1;//默认当前页为第一页 
this.cntPP= cntPP || 2;//默认每页两条纪录 
this.cntPS= cntPS || 3;//默认每页显示5个分页上下文 
this.items= []; 
this.showPNP= true;/*显示上下页链接*/ 
this.showType= true;/*滑动分页*/ 
this.result= {pagedata:[],pagebar:&#39;&#39;,limit:[0,0],report:&#39;&#39;}; 
this.parse();/*总纪录数*/ 
} 
ETNGpager.prototype.page = function (){ 
this.cntP= Math.ceil(this.cntR/this.cntPP);/*总页数*/ 
this.cntS= Math.ceil(this.cntP/this.cntPS);/*总段数*/ 
this.curS= Math.ceil(this.curP/this.cntPS);/*当前段*/ 
this.preP= this.curP -1;/*上一页*/ 
this.nextP= this.curP +1;/*下一页*/ 
this.preS= this.curS -1;/*上一段*/ 
this.nextS= this.curS +1;/*下一段*/ 
this.startR= (this.curP -1)*this.cntPP + 1;/*起始纪录*/ 
this.endR= (this.curP*this.cntPP >this.cntR)?this.cntR:this.curP*this.cntPP;/*结束纪录*/ 
this.result[&#39;pagedata&#39;]=[]; 
if(this.showType){ 
this.perSide= Math.floor(this.cntPS/2); 
this.startP= (this.curP > this.perSide)?(this.curP - this.perSide):1; 
this.endP= (this.startP + this.cntPS)>this.cntP?this.cntP:(this.startP + this.cntPS); 
}else{ 
this.startP= (this.curS-1)*this.cntPS+1; 
this.endP= (this.curS*this.cntPS>this.cntP)?this.cntP:(this.curS*this.cntPS); 
} 
for(var i = this.startP;i<=this.endP;i++){ 
this.result[&#39;pagedata&#39;].push((i==this.curP)?&#39;<span class="curPage">&#39;+i+&#39;</span>&#39;:&#39;<span onclick="page(&#39;+i+&#39;)">&#39;+i+&#39;</span>&#39;); 
} 
if(this.showPNP){ 
if(this.curP>1)this.result[&#39;pagedata&#39;].unshift(&#39;<span onclick="page(&#39;+(this.curP-1)+&#39;)">上一页</span>&#39;); 
if(this.curP<this.cntP)this.result[&#39;pagedata&#39;].push(&#39;<span onclick="page(&#39;+(this.curP+1)+&#39;)">下一页</span>&#39;); 
} 
this.result[&#39;pagebar&#39;]= this.result[&#39;pagedata&#39;].join(&#39; &#39;); 
this.result[&#39;limit&#39;]= [this.startR,this.endR]; 
this.result[&#39;report&#39;]= &#39;共&#39;+this.cntR+&#39;条,当前页&#39;+this.startR+&#39;-&#39;+this.endR+&#39;,&#39;+this.curP+&#39;/&#39;+this.cntP+&#39;页&#39;; 
} 
ETNGpager.prototype.parse = function (){ 
var obj = document.getElementById(this.srcName); 
for(var i = 0;i<obj.childNodes.length;i++){ 
if(obj.childNodes[i].nodeType!=3)this.items[this.items.length]=obj.childNodes[i].innerHTML; 
} 
this.cntR = this.items.length; 
return this.items.length; 
} 
ETNGpager.prototype.create=function(){ 
this.page(); 
document.getElementById(this.dstName).innerHTML=&#39;<li>&#39;+this.items.slice(this.startR-1,this.endR).join(&#39;</li><li>&#39;)+&#39;</li>&#39;; 
document.getElementById(this.dstName).innerHTML+=&#39;<span class="ctrlPages">&#39;+this.result[&#39;pagebar&#39;]+this.result[&#39;report&#39;]+&#39;</span>&#39;; 
} 
//--> 
</script> 
</head> 
<body> 
<ul id="listcontent" style="display:none;"> 
<li><a href=<a rel="nofollow" href="http://tech.sina.com.cn/i/2005-12-08/1204786367.shtml" target="_blank">http://tech.sina.com.cn/i/2005-12-08/1204786367.shtml</a> target=&#39;_blank&#39;>支付宝与六大代理签订协议 </a></li> 
<li><a href=<a rel="nofollow" href="http://forum.taobao.com/showThread.htm?thread=3123988&forum=14" target="_blank">http://forum.taobao.com/showThread.htm?thread=3123988&forum=14</a> target=&#39;_blank&#39;>刷卡积分可网上购物 </a></li> 
<li><a href=/alipay/news/sample/23492.htm target=&#39;_blank&#39;>支付宝为网店保驾护航 </a></li> 
<li><a href=<a rel="nofollow" href="http://it.people.com.cn/GB/8219/50656/52310/3822563.html" target="_blank">http://it.people.com.cn/GB/8219/50656/52310/3822563.html</a> target=&#39;_blank&#39;>支付宝红包送来红地毯 </a></li> 
<li><a href=/alipay/news/sample/22701.htm target=&#39;_blank&#39;>紧急天气预报"红色风暴"空降支付宝 </a></li> 
<li><a href=/alipay/news/sample/22699.htm target=&#39;_blank&#39;>小红包背后大名堂 </a></li> 
<li><a href=<a rel="nofollow" href="http://www.q88.net/SHOP_2005A/zfb.aspx" target="_blank">http://www.q88.net/SHOP_2005A/zfb.aspx</a> target=&#39;_blank&#39;>Q88.net全面无缝接合支付宝 </a></li> 
<li><a href=/alipay/news/sample/21529.htm target=&#39;_blank&#39;>电子支付规范走出第一步 使用专业版受鼓励 </a></li> 
<li><a href=/alipay/news/sample/19786.htm target=&#39;_blank&#39;>从支付宝看电子商务的发展 </a></li> 
<li><a href=/alipay/news/sample/19784.htm target=&#39;_blank&#39;>谁能与支付宝PK？ </a></li> 
<li><a href=/alipay/news/sample/19618.htm target=&#39;_blank&#39;>国内第一家引入支付宝的网络图库正式开通 </a></li> 
<li><a href=/alipay/news/sample/19475.htm target=&#39;_blank&#39;>新浪网：中关村在线加入支付宝联盟 </a></li> 
<li><a href=/alipay/news/sample/19471.htm target=&#39;_blank&#39;>千家网店加入支付宝联盟 </a></li> 
<li><a href=/alipay/news/sample/18549.htm target=&#39;_blank&#39;>我与支付宝的分分秒秒 </a></li> 
<li><a href=/alipay/news/sample/18207.htm target=&#39;_blank&#39;>支付宝—放心"网宝"的理由 </a></li> 
<li><a href=/alipay/news/sample/17944.htm target=&#39;_blank&#39;>欧飞数卡携手支付宝,再创新高 </a></li> 
<li><a href=/alipay/news/sample/17803.htm target=&#39;_blank&#39;>莎莎香水网:支付宝助我完成销售计划 </a></li> 
<li><a href=/alipay/news/sample/17801.htm target=&#39;_blank&#39;>使用支付宝:一个月交易额翻5倍 </a></li> 
<li><a href=/alipay/news/sample/17799.htm target=&#39;_blank&#39;>支付宝：一个普通站长的自述 </a></li> 
<li><a href=/alipay/news/sample/17797.htm target=&#39;_blank&#39;>新开网店如何日交易额达8000元？ </a></li> 
<li><a href=/alipay/news/sample/17563.htm target=&#39;_blank&#39;>名大数码：网店月交易额如何突破30万 </a></li> 
<li><a href=<a rel="nofollow" href="http://it.sohu.com/20050916/n240400443.shtml" target="_blank">http://it.sohu.com/20050916/n240400443.shtml</a> target=&#39;_blank&#39;>中国卡网结盟支付宝创交易量周增长新高 </a></li> 
<li><a href=<a rel="nofollow" href="http://it.people.com.cn/GB/42891/42894/3676101.html" target="_blank">http://it.people.com.cn/GB/42891/42894/3676101.html</a> target=&#39;_blank&#39;>支付宝联盟与合作伙伴合作在人民网推广 </a></li> 
<li><a href=<a rel="nofollow" href="http://forum.taobao.com/show_thread-50---103546-.htm" target="_blank">http://forum.taobao.com/show_thread-50---103546-.htm</a> target=&#39;_blank&#39;>网络银行使用全攻略---足不出户查看汇款明细 </a></li> 
<li><a href=<a rel="nofollow" href="http://forum.taobao.com/show_thread-50---1561087-.htm" target="_blank">http://forum.taobao.com/show_thread-50---1561087-.htm</a> target=&#39;_blank&#39;>"支付宝购物体验"征文-----贿赂 </a></li> 
<li><a href=<a rel="nofollow" href="http://forum.taobao.com/show_thread-50---2102458-.htm" target="_blank">http://forum.taobao.com/show_thread-50---2102458-.htm</a> target=&#39;_blank&#39;>卖家谈：谁是支付宝最终的获利者？ </a></li> 
<li><a href=<a rel="nofollow" href="http://forum.taobao.com/show_thread-50---1617047-.htm" target="_blank">http://forum.taobao.com/show_thread-50---1617047-.htm</a> target=&#39;_blank&#39;>淘宝两钻卖家感悟支付宝 </a></li> 
<li><a href=<a rel="nofollow" href="http://forum.taobao.com/show_thread-50---1686484-.htm" target="_blank">http://forum.taobao.com/show_thread-50---1686484-.htm</a> target=&#39;_blank&#39;>支付宝"即时到帐交易"的使用经验及建议 </a></li> 
<li><a href=<a rel="nofollow" href="http://forum.taobao.com/show_thread-50---1794216-.htm" target="_blank">http://forum.taobao.com/show_thread-50---1794216-.htm</a> target=&#39;_blank&#39;>我的第一笔网上交易 </a></li> 
</ul> 
<ul id="listcontent2">列表信息加载中，请您稍等……</ul> 
<script language="JavaScript"> 
<!-- 
var pager = new ETNGpager(&#39;listcontent&#39;,&#39;listcontent2&#39;,10,5); 
var curP = 1; 
showtime = setInterval("page()", 5000); 
function page(i){ 
curP =(curP>pager.cntP)?1:curP; 
if(i){ 
curP = n =i; 
}else{ 
n = curP++; 
} 
pager.curP = (n>pager.cntP)?pager.cntP:n; 
pager.create(); 
} 
//--> 
</script> 
</body> 
</html>

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사

JavaScript 엔진 : 구현 비교Apr 13, 2025 am 12:05 AM

각각의 엔진의 구현 원리 및 최적화 전략이 다르기 때문에 JavaScript 엔진은 JavaScript 코드를 구문 분석하고 실행할 때 다른 영향을 미칩니다. 1. 어휘 분석 : 소스 코드를 어휘 단위로 변환합니다. 2. 문법 분석 : 추상 구문 트리를 생성합니다. 3. 최적화 및 컴파일 : JIT 컴파일러를 통해 기계 코드를 생성합니다. 4. 실행 : 기계 코드를 실행하십시오. V8 엔진은 즉각적인 컴파일 및 숨겨진 클래스를 통해 최적화하여 Spidermonkey는 유형 추론 시스템을 사용하여 동일한 코드에서 성능이 다른 성능을 제공합니다.

브라우저 너머 : 실제 세계의 JavaScriptApr 12, 2025 am 12:06 AM

실제 세계에서 JavaScript의 응용 프로그램에는 서버 측 프로그래밍, 모바일 애플리케이션 개발 및 사물 인터넷 제어가 포함됩니다. 1. 서버 측 프로그래밍은 Node.js를 통해 실현되며 동시 요청 처리에 적합합니다. 2. 모바일 애플리케이션 개발은 재교육을 통해 수행되며 크로스 플랫폼 배포를 지원합니다. 3. Johnny-Five 라이브러리를 통한 IoT 장치 제어에 사용되며 하드웨어 상호 작용에 적합합니다.

Next.js (백엔드 통합)로 멀티 테넌트 SAAS 애플리케이션 구축Apr 11, 2025 am 08:23 AM

일상적인 기술 도구를 사용하여 기능적 다중 테넌트 SaaS 응용 프로그램 (Edtech 앱)을 구축했으며 동일한 작업을 수행 할 수 있습니다. 먼저, 다중 테넌트 SaaS 응용 프로그램은 무엇입니까? 멀티 테넌트 SAAS 응용 프로그램은 노래에서 여러 고객에게 서비스를 제공 할 수 있습니다.

Next.js (Frontend Integration)를 사용하여 멀티 테넌트 SaaS 응용 프로그램을 구축하는 방법Apr 11, 2025 am 08:22 AM

이 기사에서는 Contrim에 의해 확보 된 백엔드와의 프론트 엔드 통합을 보여 주며 Next.js를 사용하여 기능적인 Edtech SaaS 응용 프로그램을 구축합니다. Frontend는 UI 가시성을 제어하기 위해 사용자 권한을 가져오고 API가 역할 기반을 준수하도록합니다.

JavaScript : 웹 언어의 다양성 탐색Apr 11, 2025 am 12:01 AM

JavaScript는 현대 웹 개발의 핵심 언어이며 다양성과 유연성에 널리 사용됩니다. 1) 프론트 엔드 개발 : DOM 운영 및 최신 프레임 워크 (예 : React, Vue.js, Angular)를 통해 동적 웹 페이지 및 단일 페이지 응용 프로그램을 구축합니다. 2) 서버 측 개발 : Node.js는 비 차단 I/O 모델을 사용하여 높은 동시성 및 실시간 응용 프로그램을 처리합니다. 3) 모바일 및 데스크탑 애플리케이션 개발 : 크로스 플랫폼 개발은 개발 효율을 향상시키기 위해 반응 및 전자를 통해 실현됩니다.

JavaScript의 진화 : 현재 동향과 미래 전망Apr 10, 2025 am 09:33 AM

JavaScript의 최신 트렌드에는 Typescript의 Rise, 현대 프레임 워크 및 라이브러리의 인기 및 WebAssembly의 적용이 포함됩니다. 향후 전망은보다 강력한 유형 시스템, 서버 측 JavaScript 개발, 인공 지능 및 기계 학습의 확장, IoT 및 Edge 컴퓨팅의 잠재력을 포함합니다.

Demystifying JavaScript : 그것이하는 일과 중요한 이유Apr 09, 2025 am 12:07 AM

JavaScript는 현대 웹 개발의 초석이며 주요 기능에는 이벤트 중심 프로그래밍, 동적 컨텐츠 생성 및 비동기 프로그래밍이 포함됩니다. 1) 이벤트 중심 프로그래밍을 사용하면 사용자 작업에 따라 웹 페이지가 동적으로 변경 될 수 있습니다. 2) 동적 컨텐츠 생성을 사용하면 조건에 따라 페이지 컨텐츠를 조정할 수 있습니다. 3) 비동기 프로그래밍은 사용자 인터페이스가 차단되지 않도록합니다. JavaScript는 웹 상호 작용, 단일 페이지 응용 프로그램 및 서버 측 개발에 널리 사용되며 사용자 경험 및 크로스 플랫폼 개발의 유연성을 크게 향상시킵니다.

Python 또는 JavaScript가 더 좋습니까?Apr 06, 2025 am 12:14 AM

Python은 데이터 과학 및 기계 학습에 더 적합한 반면 JavaScript는 프론트 엔드 및 풀 스택 개발에 더 적합합니다. 1. Python은 간결한 구문 및 풍부한 라이브러리 생태계로 유명하며 데이터 분석 및 웹 개발에 적합합니다. 2. JavaScript는 프론트 엔드 개발의 핵심입니다. Node.js는 서버 측 프로그래밍을 지원하며 풀 스택 개발에 적합합니다.

See all articles

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

MinGW - Windows용 미니멀리스트 GNU

이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.