资料
表格
制度
合同
管理
职场
经营
创业
范文
总结
计划
作文
文章
美文
词句
教程
模板
图片
字体
图标
办公
人事
财务
生产
管理资源吧首页
>>>
教程
>>>
编程
>>>
JavaScript教程
>>>
发一个分页的js
<!-- * 用js分页显示ul/ol的列表 * * 这里的演示设置了自动滚动* 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,div,span { padding: 0 0 0 0; margin: 0 0 0 0; } .ctrlPages {COLOR: #f60;} .curPage {COLOR: #f00;} --> </style> <img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20language%3D%22JavaScript%22%3E%20%0D%0A%3C!--%20%0D%0Avar%20ETNGpager%20%3D%20function(%20srcName%2C%20dstName%2C%20cntPP%2C%20cntPS%20)%20%0D%0A%7B%20%0D%0A%20%20%20%20%20%20%20%20this.srcName%20%20%20%20%3D%20srcName%3B%20%0D%0A%20%20%20%20%20%20%20%20this.dstName%20%20%20%20%3D%20dstName%3B%20%0D%0A%20%20%20%20%20%20%20%20this.curP%20%20%20%20%20%20%20%20%3D%201%3B%2F%2F%E9%BB%98%E8%AE%A4%E5%BD%93%E5%89%8D%E9%A1%B5%E4%B8%BA%E7%AC%AC%E4%B8%80%E9%A1%B5%20%0D%0A%20%20%20%20%20%20%20%20this.cntPP%20%20%20%20%20%20%20%20%3D%20cntPP%20%7C%7C%202%3B%2F%2F%E9%BB%98%E8%AE%A4%E6%AF%8F%E9%A1%B5%E4%B8%A4%E6%9D%A1%E7%BA%AA%E5%BD%95%20%0D%0A%20%20%20%20%20%20%20%20this.cntPS%20%20%20%20%20%20%20%20%3D%20cntPS%20%7C%7C%203%3B%2F%2F%E9%BB%98%E8%AE%A4%E6%AF%8F%E9%A1%B5%E6%98%BE%E7%A4%BA5%E4%B8%AA%E5%88%86%E9%A1%B5%E4%B8%8A%E4%B8%8B%E6%96%87%20%0D%0A%20%20%20%20%20%20%20%20this.items%20%20%20%20%20%20%20%20%3D%20%5B%5D%3B%20%0D%0A%20%20%20%20%20%20%20%20this.showPNP%20%20%20%20%3D%20true%3B%2F*%E6%98%BE%E7%A4%BA%E4%B8%8A%E4%B8%8B%E9%A1%B5%E9%93%BE%E6%8E%A5*%2F%20%0D%0A%20%20%20%20%20%20%20%20this.showType%20%20%20%20%3D%20true%3B%2F*%E6%BB%91%E5%8A%A8%E5%88%86%E9%A1%B5*%2F%20%0D%0A%20%20%20%20%20%20%20%20this.result%20%20%20%20%20%20%20%20%3D%20%7Bpagedata%3A%5B%5D%2Cpagebar%3A''%2Climit%3A%5B0%2C0%5D%2Creport%3A''%7D%3B%20%0D%0A%20%20%20%20%20%20%20%20this.parse()%3B%2F*%E6%80%BB%E7%BA%AA%E5%BD%95%E6%95%B0*%2F%20%0D%0A%7D%20%0D%0AETNGpager.prototype.page%20%3D%20function%20()%7B%20%0D%0A%20%20%20%20this.cntP%20%20%20%20%3D%20Math.ceil(this.cntR%2Fthis.cntPP)%3B%2F*%E6%80%BB%E9%A1%B5%E6%95%B0*%2F%20%0D%0A%20%20%20%20this.cntS%20%20%20%20%3D%20Math.ceil(this.cntP%2Fthis.cntPS)%3B%2F*%E6%80%BB%E6%AE%B5%E6%95%B0*%2F%20%0D%0A%20%20%20%20this.curS%20%20%20%20%3D%20Math.ceil(this.curP%2Fthis.cntPS)%3B%2F*%E5%BD%93%E5%89%8D%E6%AE%B5*%2F%20%0D%0A%20%20%20%20this.preP%20%20%20%20%3D%20this.curP%20-1%3B%2F*%E4%B8%8A%E4%B8%80%E9%A1%B5*%2F%20%0D%0A%20%20%20%20this.nextP%20%20%20%20%3D%20this.curP%20%2B1%3B%2F*%E4%B8%8B%E4%B8%80%E9%A1%B5*%2F%20%0D%0A%20%20%20%20this.preS%20%20%20%20%3D%20this.curS%20-1%3B%2F*%E4%B8%8A%E4%B8%80%E6%AE%B5*%2F%20%0D%0A%20%20%20%20this.nextS%20%20%20%20%3D%20this.curS%20%2B1%3B%2F*%E4%B8%8B%E4%B8%80%E6%AE%B5*%2F%20%0D%0A%20%20%20%20this.startR%20%20%20%20%3D%20(this.curP%20-1)*this.cntPP%20%2B%201%3B%2F*%E8%B5%B7%E5%A7%8B%E7%BA%AA%E5%BD%95*%2F%20%0D%0A%20%20%20%20this.endR%20%20%20%20%3D%20(this.curP*this.cntPP%20%3Ethis.cntR)%3Fthis.cntR%3Athis.curP*this.cntPP%3B%2F*%E7%BB%93%E6%9D%9F%E7%BA%AA%E5%BD%95*%2F%20%0D%0A%20%20%20%20this.result%5B'pagedata'%5D%3D%5B%5D%3B%20%0D%0A%20%20%20%20if(this.showType)%7B%20%0D%0A%20%20%20%20%20%20%20%20this.perSide%20%20%20%20%3D%20Math.floor(this.cntPS%2F2)%3B%20%0D%0A%20%20%20%20%20%20%20%20this.startP%20%20%20%20%20%20%20%20%3D%20(this.curP%20%3E%20this.perSide)%3F(this.curP%20-%20this.perSide)%3A1%3B%20%0D%0A%20%20%20%20%20%20%20%20this.endP%20%20%20%20%20%20%20%20%3D%20(this.startP%20%2B%20this.cntPS)%3Ethis.cntP%3Fthis.cntP%3A(this.startP%20%2B%20this.cntPS)%3B%20%0D%0A%20%20%20%20%7Delse%7B%20%0D%0A%20%20%20%20%20%20%20%20this.startP%20%20%20%20%20%20%20%20%3D%20(this.curS-1)*this.cntPS%2B1%3B%20%0D%0A%20%20%20%20%20%20%20%20this.endP%20%20%20%20%20%20%20%20%3D%20(this.curS*this.cntPS%3Ethis.cntP)%3Fthis.cntP%3A(this.curS*this.cntPS)%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%20%20%20%20for(var%20i%20%3D%20this.startP%3Bi%3C%3Dthis.endP%3Bi%2B%2B)%7B%20%0D%0A%20%20%20%20%20%20%20%20this.result%5B'pagedata'%5D.push((i%3D%3Dthis.curP)%3F'%3Cspan%20class%3D%22curPage%22%3E'%2Bi%2B'%3C%2Fspan%3E'%3A'%3Cspan%20onclick%3D%22page('%2Bi%2B')%22%3E'%2Bi%2B'%3C%2Fspan%3E')%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%20%20%20%20if(this.showPNP)%7B%20%0D%0A%20%20%20%20%20%20%20%20if(this.curP%3E1)this.result%5B'pagedata'%5D.unshift('%3Cspan%20onclick%3D%22page('%2B(this.curP-1)%2B')%22%3E%E4%B8%8A%E4%B8%80%E9%A1%B5%3C%2Fspan%3E')%3B%20%0D%0A%20%20%20%20%20%20%20%20if(this.curP%3Cthis.cntP)this.result%5B'pagedata'%5D.push('%3Cspan%20onclick%3D%22page('%2B(this.curP%2B1)%2B')%22%3E%E4%B8%8B%E4%B8%80%E9%A1%B5%3C%2Fspan%3E')%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%20%20%20%20this.result%5B'pagebar'%5D%20%20%20%20%3D%20this.result%5B'pagedata'%5D.join('%26nbsp%3B%26nbsp%3B')%3B%20%0D%0A%20%20%20%20this.result%5B'limit'%5D%20%20%20%20%3D%20%5Bthis.startR%2Cthis.endR%5D%3B%20%0D%0A%20%20%20%20this.result%5B'report'%5D%20%20%20%20%3D%20'%E5%85%B1'%2Bthis.cntR%2B'%E6%9D%A1%2C%E5%BD%93%E5%89%8D%E9%A1%B5'%2Bthis.startR%2B'-'%2Bthis.endR%2B'%2C'%2Bthis.curP%2B'%2F'%2Bthis.cntP%2B'%E9%A1%B5'%3B%20%0D%0A%0D%0A%7D%20%0D%0AETNGpager.prototype.parse%20%3D%20function%20()%7B%20%0D%0A%20%20%20%20var%20obj%20%3D%20document.getElementById(this.srcName)%3B%20%0D%0A%20%20%20%20for(var%20i%20%3D%200%3Bi%3Cobj.childNodes.length%3Bi%2B%2B)%7B%20%0D%0A%20%20%20%20%20%20%20%20if(obj.childNodes%5Bi%5D.nodeType!%3D3)this.items%5Bthis.items.length%5D%3Dobj.childNodes%5Bi%5D.innerHTML%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%20%20%20%20this.cntR%20%3D%20this.items.length%3B%20%0D%0A%20%20%20%20return%20this.items.length%3B%20%0D%0A%7D%20%0D%0AETNGpager.prototype.create%3Dfunction()%7B%20%0D%0A%20%20%20%20this.page()%3B%20%0D%0A%20%20%20%20document.getElementById(this.dstName).innerHTML%3D'%3Cli%3E'%2Bthis.items.slice(this.startR-1%2Cthis.endR).join('%3C%2Fli%3E%3Cli%3E')%2B'%3C%2Fli%3E'%3B%20%0D%0A%20%20%20%20document.getElementById(this.dstName).innerHTML%2B%3D'%3Cspan%20class%3D%22ctrlPages%22%3E'%2Bthis.result%5B'pagebar'%5D%2Bthis.result%5B'report'%5D%2B'%3C%2Fspan%3E'%3B%20%0D%0A%7D%20%0D%0A%2F%2F--%3E%20%0D%0A%3C%2Fscript%3E"> </head> <body> <ul id="listcontent" style="display:none;"> <li><a href=http://tech.sina.com.cn/i/2005-12-08/1204786367.shtml target='_blank'>支付宝与六大代理签订协议 </a></li> <li><a href=http://forum.taobao.com/showThread.htm?thread=3123988&forum=14 target='_blank'>刷卡积分可网上购物 </a></li> <li><a href=/alipay/news/sample/23492.htm target='_blank'>支付宝为网店保驾护航 </a></li> <li><a href=http://it.people.com.cn/GB/8219/50656/52310/3822563.html target='_blank'>支付宝红包送来红地毯 </a></li> <li><a href=/alipay/news/sample/22701.htm target='_blank'>紧急天气预报"红色风暴"空降支付宝 </a></li> <li><a href=/alipay/news/sample/22699.htm target='_blank'>小红包背后大名堂 </a></li> <li><a href=http://www.q88.net/SHOP_2005A/zfb.aspx target='_blank'>Q88.net全面无缝接合支付宝 </a></li> <li><a href=/alipay/news/sample/21529.htm target='_blank'>电子支付规范走出第一步 使用专业版受鼓励 </a></li> <li><a href=/alipay/news/sample/19786.htm target='_blank'>从支付宝看电子商务的发展 </a></li> <li><a href=/alipay/news/sample/19784.htm target='_blank'>谁能与支付宝PK? </a></li> <li><a href=/alipay/news/sample/19618.htm target='_blank'>国内第一家引入支付宝的网络图库正式开通 </a></li> <li><a href=/alipay/news/sample/19475.htm target='_blank'>新浪网:中关村在线加入支付宝联盟 </a></li> <li><a href=/alipay/news/sample/19471.htm target='_blank'>千家网店加入支付宝联盟 </a></li> <li><a href=/alipay/news/sample/18549.htm target='_blank'>我与支付宝的分分秒秒 </a></li> <li><a href=/alipay/news/sample/18207.htm target='_blank'>支付宝—放心"网宝"的理由 </a></li> <li><a href=/alipay/news/sample/17944.htm target='_blank'>欧飞数卡携手支付宝,再创新高 </a></li> <li><a href=/alipay/news/sample/17803.htm target='_blank'>莎莎香水网:支付宝助我完成销售计划 </a></li> <li><a href=/alipay/news/sample/17801.htm target='_blank'>使用支付宝:一个月交易额翻5倍 </a></li> <li><a href=/alipay/news/sample/17799.htm target='_blank'>支付宝:一个普通站长的自述 </a></li> <li><a href=/alipay/news/sample/17797.htm target='_blank'>新开网店如何日交易额达8000元? </a></li> <li><a href=/alipay/news/sample/17563.htm target='_blank'>名大数码:网店月交易额如何突破30万 </a></li> <li><a href=http://it.sohu.com/20050916/n240400443.shtml target='_blank'>中国卡网结盟支付宝创交易量周增长新高 </a></li> <li><a href=http://it.people.com.cn/GB/42891/42894/3676101.html target='_blank'>支付宝联盟与合作伙伴合作在人民网推广 </a></li> <li><a href=http://forum.taobao.com/show_thread-50---103546-.htm target='_blank'>网络银行使用全攻略---足不出户查看汇款明细 </a></li> <li><a href=http://forum.taobao.com/show_thread-50---1561087-.htm target='_blank'>"支付宝购物体验"征文-----贿赂 </a></li> <li><a href=http://forum.taobao.com/show_thread-50---2102458-.htm target='_blank'>卖家谈:谁是支付宝最终的获利者? </a></li> <li><a href=http://forum.taobao.com/show_thread-50---1617047-.htm target='_blank'>淘宝两钻卖家感悟支付宝 </a></li> <li><a href=http://forum.taobao.com/show_thread-50---1686484-.htm target='_blank'>支付宝"即时到帐交易"的使用经验及建议 </a></li> <li><a href=http://forum.taobao.com/show_thread-50---1794216-.htm target='_blank'>我的第一笔网上交易 </a></li> </ul> <ul id="listcontent2">列表信息加载中,请您稍等……</ul> <img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20language%3D%22JavaScript%22%3E%20%0D%0A%3C!--%20%0D%0Avar%20pager%20%3D%20new%20ETNGpager('listcontent'%2C'listcontent2'%2C10%2C5)%3B%20%0D%0Avar%20curP%20%3D%201%3B%20%0D%0Ashowtime%20%3D%20setInterval(%22page()%22%2C%205000)%3B%20%0D%0Afunction%20page(i)%7B%20%0D%0A%20%20%20%20curP%20%3D(curP%3Epager.cntP)%3F1%3AcurP%3B%20%0D%0A%20%20%20%20if(i)%7B%20%0D%0A%20%20%20%20%20%20%20%20curP%20%3D%20n%20%3Di%3B%20%0D%0A%20%20%20%20%7Delse%7B%20%0D%0A%20%20%20%20%20%20%20%20n%20%3D%20curP%2B%2B%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%20%20%20%20pager.curP%20%3D%20(n%3Epager.cntP)%3Fpager.cntP%3An%3B%20%0D%0A%20%20%20%20pager.create()%3B%20%0D%0A%7D%20%0D%0A%0D%0A%2F%2F--%3E%20%0D%0A%3C%2Fscript%3E"> </body> </html>
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行
]
教程首页
更多教程