设为首页 |收藏本站 |论坛搜索
登录 注册 找回密码

站长论坛

 找回密码
 注册

QQ登录

只需一步，快速开始

全国各地医院查询重量转换换算RGB颜色查询交通标志大全各类快递查询
简体繁体转换黄金价格实时走势万年历查询实时汇率转换列车时刻查询
在线翻译工具CSS中文手册HTML学习教程MySQL中文手册JavaScript中文手册
PHP安全基础手册PHP5面向对象编程教程正则表达式系统教程SQL Server精华Apache 2.2 中文手册
DOS命令全集指南windows脚本技术中文版股票行情查询历史上的今天邮编区号查询
长度转换换算货币汇率转换常用电话号码体育彩票查询手机位置查询
域名Whois信息查询谷歌PR值查询台州网站建设台州网站开发台州域名注册
天气预报查询长度转换换算器在线电子地图车牌号码查询中国百家姓查询
返回列表 ...发表新帖
查看: 7266|回复: 0
打印 上一主题 下一主题

JavaScript经典效果集锦(转)

[复制链接]
tznktg
跳转到指定楼层
1#
发表于 2007-10-6 11:23:18 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
台州网址导航
一 实用且必用的小脚本代码:

脚本1：进入主页以后自动播放声音
  1. [/code]脚本2：进入主页后自动最大话,省的去在自己单击了[code]
  2. self.moveTo(0,0)
  3. self.resizeTo(screen.availWidth,screen.availHeight)
复制代码
脚本3：显示现在时间的脚本
  1. document.write now
复制代码
脚本4：显示最后修改时间的脚本
  1. document.write(document.lastModified)
复制代码
脚本5：设为首页,加为收藏，加入频道,启动outlook发信
  1. <a style="cursor:hand"　
  2. onclick="this.style.behavior="url(#default#homepage)";
  3. this.setHomePage([url]http://10.13.31.90/~kayvin/);[/url]">">设为首页

  5. <a style="cursor:hand"
  6. onclick="window.external.AddFavorite(location.href,document.title);">加入收藏

  8. 加入频道

  10. 与我联系
复制代码
脚本6：状态栏动态显示现在时间

  2. function see(){
  3. window.setTimeout("see()",1000);
  4. today = new Date();
  5. self.status = today.toString();
  6. }

复制代码
脚本7：关闭窗口的脚本
  1. [关闭窗口]
复制代码
脚本8：按下F12键,直接返回首页
  1. function look(){
  2. if(event.keyCode==123){document.location.href=http://10.13.31.90/~kayvin/}
  3. }
  4. if(document.onkeydown==null)
  5. {document.onkeydown=look}
复制代码
脚本9：后退,刷新,前进




复制代码
脚本10：设定时间弹出窗口,4000=4秒,当然你可以自定义
  1. function l()
  2. {
  3. window.open(" 10.13.31.90/~kayvin/ ","name","width=500,height=150,border=0")
  4. }
  5. setTimeout("l()",4000)

复制代码
二 鼠标旁边的提示信息,类似与163登录后的页面提示效果：
  1. tip

  3. //***********默认设置定义.*********************
  4. tPopWait=50;//停留tWait豪秒后显示提示。
  5. tPopShow=5000;//显示tShow豪秒后关闭提示
  6. showPopStep=20;
  7. popOpacity=99;
  8. //***************内部变量定义*****************
  9. sPop=null;
  10. curShow=null;
  11. tFadeOut=null;
  12. tFadeIn=null;
  13. tFadeWaiting=null;
  14. document.write("");
  15. document.write(".cPopText { background-color: #F8F8F5;color:#000000; border: 1px #000000 solid;font-color: font-size: 12px; padding-right: 4px; padding-left: 4px; height: 20px; padding-top: 2px; padding-bottom: 2px; filter: Alpha(Opacity=0)}");
  16. document.write("");
  17. document.write("");

  19. function showPopupText(){
  20. var o=event.srcElement;
  21. MouseX=event.x;
  22. MouseY=event.y;
  23. if(o.alt!=null && o.alt!=""){o.dypop=o.alt;o.alt=""};
  24. if(o.title!=null && o.title!=""){o.dypop=o.title;o.title=""};
  25. if(o.dypop!=sPop) {
  26. sPop=o.dypop;
  27. clearTimeout(curShow);
  28. clearTimeout(tFadeOut);
  29. clearTimeout(tFadeIn);
  30. clearTimeout(tFadeWaiting);
  31. if(sPop==null || sPop=="") {
  32. dypopLayer.innerHTML="";
  33. dypopLayer.style.filter="Alpha()";
  34. dypopLayer.filters.Alpha.opacity=0;
  35. }
  36. else {
  37. if(o.dyclass!=null) popStyle=o.dyclass
  38. else popStyle="cPopText";
  39. curShow=setTimeout("showIt()",tPopWait);
  40. }
  41. }
  42. }
  43. function showIt(){
  44. dypopLayer.className=popStyle;
  45. dypopLayer.innerHTML=sPop;
  46. popWidth=dypopLayer.clientWidth;
  47. popHeight=dypopLayer.clientHeight;
  48. if(MouseX+12+popWidth>document.body.clientWidth) popLeftAdjust=-popWidth-24
  49. else popLeftAdjust=0;
  50. if(MouseY+12+popHeight>document.body.clientHeight) popTopAdjust=-popHeight-24
  51. else popTopAdjust=0;
  52. dypopLayer.style.left=MouseX+12+document.body.scrollLeft+popLeftAdjust;
  53. dypopLayer.style.top=MouseY+12+document.body.scrollTop+popTopAdjust;
  54. dypopLayer.style.filter="Alpha(Opacity=0)";
  55. fadeOut();
  56. }
  57. function fadeOut(){
  58. if(dypopLayer.filters.Alpha.opacity<popOpacity) {
  59. dypopLayer.filters.Alpha.opacity+=showPopStep;
  60. tFadeOut=setTimeout("fadeOut()",1);
  61. }
  62. else {
  63. dypopLayer.filters.Alpha.opacity=popOpacity;
  64. tFadeWaiting=setTimeout("fadeIn()",tPopShow);
  65. }
  66. }
  67. function fadeIn(){
  68. if(dypopLayer.filters.Alpha.opacity>0) {
  69. dypopLayer.filters.Alpha.opacity-=1;
  70. tFadeIn=setTimeout("fadeIn()",1);
  71. }
  72. }
  73. document.onmouseover=showPopupText;
复制代码
三 如果文字过长,则将过长的部分变成省略号显示：
  1. <DIV STYLE="width: 120px; height: 50px; border: 1px solid blue;
  2.             overflow: hidden; text-overflow:ellipsis">
  3. 就是比如有一行文字，很长，表格内一行显示不下.
复制代码
四 滚动的图片

  2. imgArr=new Array()
  3. imgArr[0]=""
  4. imgArr[1]=""
  5. imgArr[2]=""
  6. imgArr[3]=""
  7. imgArr[4]=""

  9. var moveStep=4        //步长，单位：pixel
  10. var moveRelax=100    //移动时间间隔，单位：ms

  12. ns4=(document.layers)?true:false

  14. var displayImgAmount=4    //视区窗口可显示个数
  15. var divWidth=220    //每块图片占位宽
  16. var divHeight=145    //每块图片占位高

  18. var startDnum=0
  19. var nextDnum=startDnum+displayImgAmount
  20. var timeID
  21. var outHover=false

  23. var startDivClipLeft
  24. var nextDivClipRight

  26. function initDivPlace(){
  27.     if (ns4){
  28.         for (i=0;i<displayImgAmount;i++){
  29.             eval("document.divOuter.document.divAds"+i+".left="+divWidth*i)
  30.         }
  31.         for (i=displayImgAmount;i<imgArr.length;i++){
  32.             eval("document.divOuter.document.divAds"+i+".left="+divWidth*displayImgAmount)
  33.         }
  34.     }else{
  35.         for (i=0;i<displayImgAmount;i++){
  36.             eval("document.all.divAds"+i+".style.left="+divWidth*i)
  37.         }
  38.         for (i=displayImgAmount;i<imgArr.length;i++){
  39.             eval("document.all.divAds"+i+".style.left="+divWidth*displayImgAmount)
  40.         }
  41.     }
  42. }

  44. function mvStart(){
  45.     timeID=setTimeout(moveLeftDiv,moveRelax)
  46. }

  48. function mvStop(){
  49.     clearTimeout(timeID)
  50. }

  52. function moveLeftDiv(){
  53.     if (ns4){
  54.         for (i=0;i<=displayImgAmount;i++){
  55.             eval("document.divOuter.document.divAds"+parseInt((startDnum+i)%imgArr.length)+".left=document.divOuter.document.divAds"+parseInt((startDnum+i)%imgArr.length)+".left-moveStep")
  56.         }

  58.         startDivClipLeft=parseInt(eval("document.divOuter.document.divAds"+startDnum+".clip.left"))
  59.         nextDivClipRight=parseInt(eval("document.divOuter.document.divAds"+nextDnum+".clip.right"))

  61.         if (startDivClipLeft+moveStep>divWidth){
  62.             eval("document.divOuter.document.divAds"+nextDnum+".clip.right="+divWidth)
  63.             
  64.             eval("document.divOuter.document.divAds"+startDnum+".left="+divWidth*displayImgAmount)
  65.             eval("document.divOuter.document.divAds"+parseInt((nextDnum+1)%imgArr.length)+".left=document.divOuter.document.divAds"+nextDnum+".left+"+divWidth)
  66.             eval("document.divOuter.document.divAds"+parseInt((nextDnum+1)%imgArr.length)+".clip.left=0")
  67.             
  68.             
  69.             startDnum=(++startDnum)%imgArr.length
  70.             nextDnum=(startDnum+displayImgAmount)%imgArr.length
  71.             
  72.             startDivClipLeft=moveStep-(divWidth-startDivClipLeft)
  73.             nextDivClipRight=moveStep-(divWidth-nextDivClipRight)
  74.         }else{
  75.             eval("document.divOuter.document.divAds"+nextDnum+".clip.left=0")
  76.             startDivClipLeft+=moveStep
  77.             nextDivClipRight+=moveStep
  78.         }
  79.         eval("document.divOuter.document.divAds"+startDnum+".clip.left="+startDivClipLeft)
  80.         eval("document.divOuter.document.divAds"+nextDnum+".clip.right="+nextDivClipRight)
  81.     }else{
  82.         for (i=0;i<=displayImgAmount;i++){
  83.             eval("document.all.divAds"+parseInt((startDnum+i)%imgArr.length)+".style.left=document.all.divAds"+parseInt((startDnum+i)%imgArr.length)+".style.pixelLeft-moveStep")
  84.         }
  85.    
  86.         startDivClipLeft=parseInt(eval("document.all.divAds"+startDnum+".currentStyle.clipLeft"))
  87.         nextDivClipRight=parseInt(eval("document.all.divAds"+nextDnum+".currentStyle.clipRight"))
  88.    
  89.         if (startDivClipLeft+moveStep>divWidth){
  90.             eval("document.all.divAds"+nextDnum+".style.clip='rect(0,"+divWidth+","+divHeight+",0"+")'")
  91.             
  92.             eval("document.all.divAds"+startDnum+".style.left="+divWidth*displayImgAmount)
  93.             eval("document.all.divAds"+parseInt((nextDnum+1)%imgArr.length)+".style.left=document.all.divAds"+nextDnum+".style.pixelLeft+"+divWidth)
  94.             
  95.             startDnum=(++startDnum)%imgArr.length
  96.             nextDnum=(startDnum+displayImgAmount)%imgArr.length
  97.             
  98.             startDivClipLeft=moveStep-(divWidth-startDivClipLeft)
  99.             nextDivClipRight=moveStep-(divWidth-nextDivClipRight)
  100.         }else{
  101.             startDivClipLeft+=moveStep
  102.             nextDivClipRight+=moveStep
  103.         }
  104.         eval("document.all.divAds"+startDnum+".style.clip='rect(0,"+divWidth+","+divHeight+","+startDivClipLeft+")'")
  105.         eval("document.all.divAds"+nextDnum+".style.clip='rect(0,"+nextDivClipRight+","+divHeight+",0)'")
  106.     }

  108.     if (outHover){
  109.         mvStop()
  110.     }else{
  111.         mvStart()
  112.     }
  113.    
  114.    
  115. }

  117. function writeDivs(){
  118.     if (ns4){
  119.         document.write("")
  120.         
  121.         for (i=0;i<imgArr.length;i++){
  122.             document.write("")
  123.             document.write(imgArr[i]+" ")
  124.             document.write("")
  125.         }
  126.         document.write("")
  127.         document.close()
  128.         for (i=displayImgAmount;i<imgArr.length;i++){
  129.             eval("document.divOuter.document.divAds"+i+".clip.right=0")
  130.         }
  131.     }else{
  132.         document.write("")
  133.         
  134.         for (i=0;i<imgArr.length;i++){
  135.             document.write("")
  136.             document.write(imgArr[i]+" ")
  137.             document.write("")
  138.         }
  139.         document.write("")
  140.         for (i=displayImgAmount;i<imgArr.length;i++){
  141.             eval("document.all.divAds"+i+".style.clip='rect(0,0,"+divHeight+",0)'")
  142.         }
  143.     }
  144. }


  147. writeDivs();initDivPlace();
复制代码
五 接收键盘指令的脚本:

  2. <!--
  3. var hotkey=97
  4. var destination="http://www.wyev.com"
  5. if (document.layers)
  6. document.captureEvents(Event.KEYPRESS)
  7. function backhome(e){
  8. if (document.layers){
  9. if (e.which==hotkey)
  10. window.location=destination
  11. }
  12. else if (document.all){
  13. if (event.keyCode==hotkey)
  14. window.location=destination
  15. }
  16. }
  17. document.onkeypress=backhome
  18. //-->



  22. onkeydown="javascript:onenter();"

  24. function onenter(){
  25. if(event.keyCode==13){
  26. alert("回车");
  27. }
  28. }
复制代码
六 让你的文本链接渐隐渐显:







  8. startColor = "#671700"; // 定义链接颜色
  9. endColor = "#D8D1C5";  // 定义要渐变到最后的颜色

  11. stepIn = 17;
  12. stepOut = 23;

  14. /*
  15. 定义是否让所有的文本链接自动渐变，true为是，false为否
  16. */
  17. autoFade = true;  

  19. /*
  20. 在这里定义css样式里的类class：fade，如果为true，那么你要将要渐变的链接上加上此fade样式
  21. */
  22. sloppyClass = false;

  24. hexa = new makearray(16);
  25. for(var i = 0; i < 10; i++)
  26.     hexa[i] = i;
  27. hexa[10]="a"; hexa[11]="b"; hexa[12]="c";
  28. hexa[13]="d"; hexa[14]="e"; hexa[15]="f";

  30. document.onmouseover = domouseover;
  31. document.onmouseout = domouseout;

  33. startColor = dehexize(startColor.toLowerCase());
  34. endColor = dehexize(endColor.toLowerCase());

  36. var fadeId = new Array();

  38. function dehexize(Color){
  39. var colorArr = new makearray(3);
  40. for (i=1; i<7; i++){
  41.   for (j=0; j<16; j++){
  42.    if (Color.charAt(i) == hexa[j]){
  43.     if (i%2 !=0)
  44.      colorArr[Math.floor((i-1)/2)]=eval(j)*16;
  45.     else
  46.      colorArr[Math.floor((i-1)/2)]+=eval(j);
  47.    }
  48.   }
  49. }
  50. return colorArr;
  51. }

  53. function domouseover() {
  54.   if(document.all){
  55.    var srcElement = event.srcElement;
  56.    if ((srcElement.tagName == "A" && autoFade) || srcElement.className == "fade" || (sloppyClass && srcElement.className.indexOf("fade") != -1))
  57.         fade(startColor,endColor,srcElement.uniqueID,stepIn);      
  58.    }
  59. }

  61. function domouseout() {
  62.   if (document.all){
  63.    var srcElement = event.srcElement;
  64.     if ((srcElement.tagName == "A" && autoFade) || srcElement.className == "fade" || (sloppyClass && srcElement.className.indexOf("fade") != -1))
  65.         fade(endColor,startColor,srcElement.uniqueID,stepOut);
  66.     }
  67. }

  69. function makearray(n) {
  70.     this.length = n;
  71.     for(var i = 1; i <= n; i++)
  72.         this[i] = 0;
  73.     return this;
  74. }

  76. function hex(i) {
  77.     if (i < 0)
  78.         return "00";
  79.     else if (i > 255)
  80.         return "ff";
  81.     else
  82.        return "" + hexa[Math.floor(i/16)] + hexa[i%16];}

  84. function setColor(r, g, b, element) {
  85.       var hr = hex(r); var hg = hex(g); var hb = hex(b);
  86.       element.style.color = "#"+hr+hg+hb;
  87. }

  89. function fade(s,e, element,step){
  90. var sr = s[0]; var sg = s[1]; var sb = s[2];
  91. var er = e[0]; var eg = e[1]; var eb = e[2];

  93. if (fadeId[0] != null && fade[0] != element){
  94.   setColor(sr,sg,sb,eval(fadeId[0]));
  95.   var i = 1;
  96.   while(i < fadeId.length){
  97.    clearTimeout(fadeId[i]);
  98.    i++;
  99.    }
  100.   }
  101.   
  102.     for(var i = 0; i <= step; i++) {
  103.      fadeId[i+1] = setTimeout("setColor(Math.floor(" +sr+ " *(( " +step+ " - " +i+ " )/ " +step+ " ) + " +er+ " * (" +i+ "/" +
  104.    step+ ")),Math.floor(" +sg+ " * (( " +step+ " - " +i+ " )/ " +step+ " ) + " +eg+ " * (" +i+ "/" +step+
  105.    ")),Math.floor(" +sb+ " * ((" +step+ "-" +i+ ")/" +step+ ") + " +eb+ " * (" +i+ "/" +step+ ")),"+element+");",i*step);
  106.   }
  107. fadeId[0] = element;
  108. }





  114. 让你的文本链接渐隐渐显[c/ode]
  115. 七 类似与QQ的好友/黑名单之类的树型菜单_极品:

  117. [code]
  118. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">


  121. New Document








  130. if (!document.getElementById)
  131.     document.getElementById = function() { return null; }

  133. function initializeMenu(menuId, actuatorId) {
  134.     var menu = document.getElementById(menuId);
  135.     var actuator = document.getElementById(actuatorId);

  137.     if (menu == null || actuator == null) return;

  139.     //if (window.opera) return; // I'm too tired

  141.     actuator.parentNode.style.backgroundImage = "url(/images/plus.gif)";
  142.     actuator.onclick = function() {
  143.         var display = menu.style.display;
  144.         this.parentNode.style.backgroundImage =
  145.             (display == "block") ? "url(/images/plus.gif)" : "url(/images/minus.gif)";
  146.         menu.style.display = (display == "block") ? "none" : "block";

  148.         return false;
  149.     }
  150. }
  151. window.onload = function() {
  152.             initializeMenu("productsMenu", "productsActuator");
  153.             initializeMenu("newPhonesMenu", "newPhonesActuator");
  154.             initializeMenu("compareMenu", "compareActuator");
  155.         }


  158. body {
  159.   font-family: verdana, helvetica, arial, sans-serif;
  160. }

  162. #mainMenu {
  163.   background-color: #EEE;
  164.   border: 1px solid #CCC;
  165.   color: #000;
  166.   width: 203px;
  167. }

  169. #menuList {
  170.   margin: 0px;
  171.   padding: 10px 0px 10px 15px;
  172. }

  174. li.menubar {
  175.   background: url(/images/plus.gif) no-repeat 0em 0.3em;
  176.   font-size: 12px;
  177.   line-height: 1.5em;
  178.   list-style: none outside;
  179. }

  181. .menu, .submenu {
  182.   display: none;
  183.   margin-left: 15px;
  184.   padding: 0px;
  185. }

  187. .menu li, .submenu li {
  188.   background: url(/images/square.gif) no-repeat 0em 0.3em;
  189.   list-style: none outside;
  190. }

  192. a.actuator {
  193.   background-color: transparent;
  194.   color: #000;
  195.   font-size: 12px;
  196.   padding-left: 15px;
  197.   text-decoration: none;
  198. }

  200. a.actuator:hover {
  201.   text-decoration: underline;
  202. }

  204. .menu li a, .submenu li a {
  205.   background-color: transparent;
  206.   color: #000;
  207.   font-size: 12px;
  208.   padding-left: 15px;
  209.   text-decoration: none;
  210. }

  212. .menu li a:hover, submenu li a:hover {
  213.   /*border-bottom: 1px dashed #000;*/
  214.   text-decoration: underline;
  215. }

  217. span.key {
  218.   text-decoration: underline;
  219. }




  224.       
  225.         
  226.           图秀地带收藏夹
  227.          
  228.             
  229.               我的好友
  230.               
  231.                 张三[10000001]
  232.                 李四[10000002]
  233.                 张三[10000001]
  234.                 李四[10000002]
  235.               
  236.             
  237.             
  238.               陌生人
  239.               
  240.                 张三[10000001]
  241.                 李四[10000002]
  242.                 张三[10000001]
  243.                 李四[10000002]
  244.               
  245.             
  246.          
  247.         
  248.       
  249.    
  250.   

复制代码
八 很多的脚本翻页:
  1. <!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



  5. JavaScript: showPages v1.0 [by Lapuasi.com]

  7. <!--
  8. /*

  10. showPages v1.1
  11. =================================

  13. Infomation
  14. ----------------------
  15. Author : Lapuasi
  16. E-Mail : [email]lapuasi@gmail.com[/email]
  17. Web : [url]http://www.lapuasi.com[/url]
  18. Date : 2005-11-17


  21. Example
  22. ----------------------
  23. var pg = new showPages('pg');
  24. pg.pageCount = 12; //定义总页数(必要)
  25. pg.argName = 'p';    //定义参数名(可选,缺省为page)
  26. pg.printHtml();        //显示页数


  29. Supported in Internet Explorer, Mozilla Firefox
  30. */

  32. function showPages(name) { //初始化属性
  33.         this.name = name;      //对象名称
  34.         this.page = 1;         //当前页数
  35.         this.pageCount = 1;    //总页数
  36.         this.argName = 'page'; //参数名
  37.         this.showTimes = 1;    //打印次数
  38. }

  40. showPages.prototype.getPage = function(){ //丛url获得当前页数,如果变量重复只获取最后一个
  41.         var args = location.search;
  42.         var reg = new RegExp('[\?&]?' + this.argName + '=([^&]*)[&$]?', 'gi');
  43.         var chk = args.match(reg);
  44.         this.page = RegExp.$1;
  45. }
  46. showPages.prototype.checkPages = function(){ //进行当前页数和总页数的验证
  47.         if (isNaN(parseInt(this.page))) this.page = 1;
  48.         if (isNaN(parseInt(this.pageCount))) this.pageCount = 1;
  49.         if (this.page < 1) this.page = 1;
  50.         if (this.pageCount < 1) this.pageCount = 1;
  51.         if (this.page > this.pageCount) this.page = this.pageCount;
  52.         this.page = parseInt(this.page);
  53.         this.pageCount = parseInt(this.pageCount);
  54. }
  55. showPages.prototype.createHtml = function(mode){ //生成html代码
  56.         var strHtml = '', prevPage = this.page - 1, nextPage = this.page + 1;
  57.         if (mode == '' || typeof(mode) == 'undefined') mode = 0;
  58.         switch (mode) {
  59.                 case 0 : //模式1 (页数,首页,前页,后页,尾页)
  60.                         strHtml += 'Pages: ' + this.page + ' / ' + this.pageCount + '';
  61.                         strHtml += '';
  62.                         if (prevPage < 1) {
  63.                                 strHtml += '&laquo;';
  64.                                 strHtml += '‹';
  65.                         } else {
  66.                                 strHtml += '&laquo;';
  67.                                 strHtml += '‹';
  68.                         }
  69.                         for (var i = 1; i <= this.pageCount; i++) {
  70.                                 if (i > 0) {
  71.                                         if (i == this.page) {
  72.                                                 strHtml += '[' + i + ']';
  73.                                         } else {
  74.                                                 strHtml += '[' + i + ']';
  75.                                         }
  76.                                 }
  77.                         }
  78.                         if (nextPage > this.pageCount) {
  79.                                 strHtml += '›';
  80.                                 strHtml += '&raquo;';
  81.                         } else {
  82.                                 strHtml += '›';
  83.                                 strHtml += '&raquo;';
  84.                         }
  85.                         strHtml += '
  86. ';
  87.                         break;
  88.                 case 1 : //模式1 (10页缩略,首页,前页,后页,尾页)
  89.                         strHtml += 'Pages: ' + this.page + ' / ' + this.pageCount + '';
  90.                         strHtml += '';
  91.                         if (prevPage < 1) {
  92.                                 strHtml += '&laquo;';
  93.                                 strHtml += '‹';
  94.                         } else {
  95.                                 strHtml += '&laquo;';
  96.                                 strHtml += '‹';
  97.                         }
  98.                         if (this.page % 10 ==0) {
  99.                                 var startPage = this.page - 9;
  100.                         } else {
  101.                                 var startPage = this.page - this.page % 10 + 1;
  102.                         }
  103.                         if (startPage > 10) strHtml += '...';
  104.                         for (var i = startPage; i < startPage + 10; i++) {
  105.                                 if (i > this.pageCount) break;
  106.                                 if (i == this.page) {
  107.                                         strHtml += '[' + i + ']';
  108.                                 } else {
  109.                                         strHtml += '[' + i + ']';
  110.                                 }
  111.                         }
  112.                         if (this.pageCount >= startPage + 10) strHtml += '...';
  113.                         if (nextPage > this.pageCount) {
  114.                                 strHtml += '›';
  115.                                 strHtml += '&raquo;';
  116.                         } else {
  117.                                 strHtml += '›';
  118.                                 strHtml += '&raquo;';
  119.                         }
  120.                         strHtml += '
  121. ';
  122.                         break;
  123.                 case 2 : //模式2 (前后缩略,页数,首页,前页,后页,尾页)
  124.                         strHtml += 'Pages: ' + this.page + ' / ' + this.pageCount + '';
  125.                         strHtml += '';
  126.                         if (prevPage < 1) {
  127.                                 strHtml += '&laquo;';
  128.                                 strHtml += '‹';
  129.                         } else {
  130.                                 strHtml += '&laquo;';
  131.                                 strHtml += '‹';
  132.                         }
  133.                         if (this.page != 1) strHtml += '[1]';
  134.                         if (this.page >= 5) strHtml += '...';
  135.                         if (this.pageCount > this.page + 2) {
  136.                                 var endPage = this.page + 2;
  137.                         } else {
  138.                                 var endPage = this.pageCount;
  139.                         }
  140.                         for (var i = this.page - 2; i <= endPage; i++) {
  141.                                 if (i > 0) {
  142.                                         if (i == this.page) {
  143.                                                 strHtml += '[' + i + ']';
  144.                                         } else {
  145.                                                 if (i != 1 && i != this.pageCount) {
  146.                                                         strHtml += '[' + i + ']';
  147.                                                 }
  148.                                         }
  149.                                 }
  150.                         }
  151.                         if (this.page + 3 < this.pageCount) strHtml += '...';
  152.                         if (this.page != this.pageCount) strHtml += '[' + this.pageCount + ']';
  153.                         if (nextPage > this.pageCount) {
  154.                                 strHtml += '›';
  155.                                 strHtml += '&raquo;';
  156.                         } else {
  157.                                 strHtml += '›';
  158.                                 strHtml += '&raquo;';
  159.                         }
  160.                         strHtml += '
  161. ';
  162.                         break;
  163.                 case 3 : //模式3 (箭头样式,首页,前页,后页,尾页) (only IE)
  164.                         strHtml += 'Pages: ' + this.page + ' / ' + this.pageCount + '';
  165.                         strHtml += '';
  166.                         if (prevPage < 1) {
  167.                                 strHtml += '9';
  168.                                 strHtml += '7';
  169.                         } else {
  170.                                 strHtml += '9';
  171.                                 strHtml += '7';
  172.                         }
  173.                         if (nextPage > this.pageCount) {
  174.                                 strHtml += '8';
  175.                                 strHtml += ':';
  176.                         } else {
  177.                                 strHtml += '8';
  178.                                 strHtml += ':';
  179.                         }
  180.                         strHtml += '
  181. ';
  182.                         break;
  183.                 case 4 : //模式4 (下拉框)
  184.                         if (this.pageCount < 1) {
  185.                                 strHtml += '';
  186.                                 strHtml += 'No Pages';
  187.                         } else {
  188.                                 var chkSelect;
  189.                                 strHtml += '';
  190.                                 for (var i = 1; i <= this.pageCount; i++) {
  191.                                         if (this.page == i) chkSelect=' selected="selected"';
  192.                                         else chkSelect='';
  193.                                         strHtml += 'Pages: ' + i + ' / ' + this.pageCount + '';
  194.                                 }
  195.                         }
  196.                         strHtml += '';
  197.                         break;
  198.                 case 5 : //模式5 (输入框)
  199.                         strHtml += '';
  200.                         if (this.pageCount < 1) {
  201.                                 strHtml += '';
  202.                                 strHtml += '';
  203.                         } else {
  204.                                 strHtml += '';
  205.                                 strHtml += '';
  206.                                 strHtml += '';
  207.                                 strHtml += '';
  208.                         }
  209.                         strHtml += '';
  210.                         break;
  211.                 default :
  212.                         strHtml = 'Javascript showPage Error: not find mode ' + mode;
  213.                         break;
  214.         }
  215.         return strHtml;
  216. }
  217. showPages.prototype.createUrl = function (page) { //生成页面跳转url
  218.         if (isNaN(parseInt(page))) page = 1;
  219.         if (page < 1) page = 1;
  220.         if (page > this.pageCount) page = this.pageCount;
  221.         var url = location.protocol + '//' + location.host + location.pathname;
  222.         var args = location.search;
  223.         var reg = new RegExp('([\?&]?)' + this.argName + '=[^&]*[&$]?', 'gi');
  224.         args = args.replace(reg,'$1');
  225.         if (args == '' || args == null) {
  226.                 args += '?' + this.argName + '=' + page;
  227.         } else if (args.substr(args.length - 1,1) == '?' || args.substr(args.length - 1,1) == '&') {
  228.                         args += this.argName + '=' + page;
  229.         } else {
  230.                         args += '&' + this.argName + '=' + page;
  231.         }
  232.         return url + args;
  233. }
  234. showPages.prototype.toPage = function(page){ //页面跳转
  235.         var turnTo = 1;
  236.         if (typeof(page) == 'object') {
  237.                 turnTo = page.options[page.selectedIndex].value;
  238.         } else {
  239.                 turnTo = page;
  240.         }
  241.         self.location.href = this.createUrl(turnTo);
  242. }
  243. showPages.prototype.printHtml = function(mode){ //显示html代码
  244.         this.getPage();
  245.         this.checkPages();
  246.         this.showTimes += 1;
  247.         document.write('');
  248.         document.getElementById('pages_' + this.name + '_' + this.showTimes).innerHTML = this.createHtml(mode);
  249.         
  250. }
  251. showPages.prototype.formatInputPage = function(e){ //限定输入页数格式
  252.         var ie = navigator.appName=="Microsoft Internet Explorer"?true:false;
  253.         if(!ie) var key = e.which;
  254.         else var key = event.keyCode;
  255.         if (key == 8 || key == 46 || (key >= 48 && key <= 57)) return true;
  256.         return false;
  257. }
  258. //-->


  261. /* Pages Main Tyle */
  262. .pages {
  263.         color: #000000;
  264.         cursor: default;
  265.         font-size: 10px;
  266.         font-family: Tahoma, Verdana;
  267.         padding: 3px 0px 3px 0px;
  268. }
  269. .pages .count, .pages .number, .pages .arrow {
  270.         color: #000000;
  271.         font-size: 10px;
  272.         background-color: #F7F7F7;
  273.         border: 1px solid #CCCCCC;
  274. }
  275. /* Page and PageCount Style */
  276. .pages .count {
  277.         font-weight: bold;
  278.         border-right: none;
  279.         padding: 2px 10px 1px 10px;
  280. }
  281. /* Mode 0,1,2 Style (Number) */
  282. .pages .number {
  283.         font-weight: normal;
  284.         padding: 2px 10px 1px 10px;
  285. }
  286. .pages .number a, .pages .number span {
  287.         font-size: 10px;
  288. }
  289. .pages .number span {
  290.         color: #999999;
  291.         margin: 0px 3px 0px 3px;
  292. }
  293. .pages .number a {
  294.         color: #000000;
  295.         text-decoration: none;
  296. }
  297. .pages .number a:hover {
  298.         color: #0000ff;
  299. }
  300. /* Mode 3 Style (Arrow) */
  301. .pages .arrow {
  302.         font-weight: normal;
  303.         padding: 0px 5px 0px 5px;
  304. }
  305. .pages .arrow a, .pages .arrow span {
  306.         font-size: 10px;
  307.         font-family: Webdings;
  308. }
  309. .pages .arrow span {
  310.         color: #999999;
  311.         margin: 0px 5px 0px 5px;
  312. }
  313. .pages .arrow a {
  314.         color: #000000;
  315.         text-decoration: none;
  316. }
  317. .pages .arrow a:hover {
  318.         color: #0000ff;
  319. }
  320. /* Mode 4 Style (Select) */
  321. .pages select, .pages input {
  322.         color: #000000;
  323.         font-size: 10px;
  324.         font-family: Tahoma, Verdana;
  325. }
  326. /* Mode 5 Style (Input) */
  327. .pages .input input.ititle, .pages .input input.itext, .pages .input input.icount {
  328.         color: #666666;
  329.         font-weight: bold;
  330.         background-color: #F7F7F7;
  331.         border: 1px solid #CCCCCC;
  332. }
  333. .pages .input input.ititle {
  334.         width: 70px;
  335.         text-align: right;
  336.         border-right: none;
  337. }
  338. .pages .input input.itext {
  339.         width: 25px;
  340.         color: #000000;
  341.         text-align: right;
  342.         border-left: none;
  343.         border-right: none;
  344. }
  345. .pages .input input.icount {
  346.         width: 35px;
  347.         text-align: left;
  348.         border-left: none;
  349. }
  350. .pages .input input.ibutton {
  351.         height: 17px;
  352.         color: #FFFFFF;
  353.         font-weight: bold;
  354.         font-family: Verdana;
  355.         background-color: #999999;
  356.         border: 1px solid #666666;
  357.         padding: 0px 0px 2px 1px;
  358.         margin-left: 2px;
  359.         cursor: hand;
  360. }

  362. /* body */
  363. body {
  364.         font-size: 12px;
  365. }





  371. <!--
  372. var pg = new showPages('pg');
  373. pg.pageCount =12;  // 定义总页数(必要)
  374. //pg.argName = 'p';  // 定义参数名(可选,默认为page)

  376. document.write('
  377. Show Times: ' + pg.showTimes + ', Mood Default');
  378. pg.printHtml();
  379. document.write('
  380. Show Times: ' + pg.showTimes + ', Mood 0');
  381. pg.printHtml(0);
  382. document.write('
  383. Show Times: ' + pg.showTimes + ', Mood 1');
  384. pg.printHtml(1);
  385. document.write('
  386. Show Times: ' + pg.showTimes + ', Mood 2');
  387. pg.printHtml(2);
  388. document.write('
  389. Show Times: ' + pg.showTimes + ', Mood 3 (only IE)');
  390. pg.printHtml(3);
  391. document.write('
  392. Show Times: ' + pg.showTimes + ', Mood 4');
  393. pg.printHtml(4);
  394. document.write('
  395. Show Times: ' + pg.showTimes + ', Mood 5');
  396. pg.printHtml(5);
  397. //-->


复制代码
九 DIV的透明层实现:


  3.         
  4.            
  5.                                 
  6.             你也可以在这里插入图片
  7.                               
  8.                               
  9.                                 
  10.             你想注册地图名片吗
  11.                               
  12.                               
  13.                                 
  14.             [url]http://mc.mapabc.com[/url]
  15.                               
  16.                               
  17.                                 
  18.             EMAIL:lipeng@mapabc.com
  19.                               
  20.                               
  21.                                 
  22.             地址
  23.                               
  24.                               
  25.                                 
  26.             邮编
  27.                               
  28.                            
  29.               
复制代码
十 超级强大的表单验证：
  1. 表单验证类 Validator v1.01

  3. body,td{font:normal 12px Verdana;color:#333333}
  4. input,textarea,select,td{font:normal 12px Verdana;color:#333333;border:1px solid #999999;background:#ffffff}
  5. table{border-collapse:collapse;}
  6. td{padding:3px}
  7. input{height:20;}
  8. textarea{width:80%;height:50px;overfmin:auto;}
  9. form{display:inline}


  12.   
  13.    
  14.    真实姓名：
  15.   
  16.   
  17.    英文名：
  18.   
  19.    
  20.    主页：
  21.   
  22.   
  23.    密码：
  24.   
  25.   
  26.    重复：
  27.   
  28.   
  29.    信箱：
  30.   
  31.    
  32.    信箱：
  33.   
  34.   
  35.    QQ：
  36.   
  37.    
  38.    身份证：
  39.   
  40.   
  41.    年龄：
  42.   
  43.    
  44.    年龄1：
  45.   
  46.    
  47.    电话：
  48.   
  49.    
  50.    手机：
  51.   
  52.      
  53.    生日：
  54.   
  55.    
  56.    邮政编码：
  57.   
  58.   
  59.    邮政编码：
  60.   
  61.   
  62.    操作系统：选择您所用的操作系统Win98Win2kWinXP
  63.   
  64.   
  65.    所在省份：广东陕西浙江江西
  66.   
  67.   
  68.    爱好：运动上网听音乐看书
  69.   
  70.    自我介绍：中文是一个字
  71.   
  72.      自传：中文是两个字节t
  73.   
  74.   
  75.    
  76.   
  77.   


  80. /*************************************************
  81.         Validator v1.01
  82.         code by 我佛山人
  83.         [email]wfsr@cunite.com[/email]
  84.         [url]http://www.cunite.com[/url]
  85. *************************************************/
  86. Validator = {
  87.         Require : /.+/,
  88.         Email : /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/,
  89.         Phone : /^((\(\d{3}\))|(\d{3}\-))?(\(0\d{2,3}\)|0\d{2,3}-)?[1-9]\d{6,7}$/,
  90.         Mobile : /^((\(\d{3}\))|(\d{3}\-))?13\d{9}$/,
  91.         Url : /^http:\/\/[A-Za-z0-9]+\.[A-Za-z0-9]+[\/=\?%\-&_~`@[\]\':+!]*([^<>\"\"])*$/,
  92.         IdCard : /^\d{15}(\d{2}[A-Za-z0-9])?$/,
  93.         Currency : /^\d+(\.\d+)?$/,
  94.         Number : /^\d+$/,
  95.         Zip : /^[1-9]\d{5}$/,
  96.         QQ : /^[1-9]\d{4,8}$/,
  97.         Integer : /^[-\+]?\d+$/,
  98.         Double : /^[-\+]?\d+(\.\d+)?$/,
  99.         English : /^[A-Za-z]+$/,
  100.         Chinese :  /^[\u0391-\uFFE5]+$/,
  101.         UnSafe : /^(([A-Z]*|[a-z]*|\d*|[-_\~!@#\$%\^&\*\.\(\)\[\]\{\}<>\?\\\/\'\"]*)|.{0,5})$|\s/,
  102.         IsSafe : function(str){return !this.UnSafe.test(str);},
  103.         SafeString : "this.IsSafe(value)",
  104.         Limit : "this.limit(value.length,getAttribute('min'),  getAttribute('max'))",
  105.         LimitB : "this.limit(this.LenB(value), getAttribute('min'), getAttribute('max'))",
  106.         Date : "this.IsDate(value, getAttribute('min'), getAttribute('format'))",
  107.         Repeat : "value == document.getElementsByName(getAttribute('to'))[0].value",
  108.         Range : "getAttribute('min') < value && value < getAttribute('max')",
  109.         Compare : "this.compare(value,getAttribute('operator'),getAttribute('to'))",
  110.         Custom : "this.Exec(value, getAttribute('regexp'))",
  111.         Group : "this.MustChecked(getAttribute('name'), getAttribute('min'), getAttribute('max'))",
  112.         ErrorItem : [document.forms[0]],
  113.         ErrorMessage : ["以下原因导致提交失败：\t\t\t\t"],
  114.         Validate : function(theForm, mode){
  115.                 var obj = theForm || event.srcElement;
  116.                 var count = obj.elements.length;
  117.                 this.ErrorMessage.length = 1;
  118.                 this.ErrorItem.length = 1;
  119.                 this.ErrorItem[0] = obj;
  120.                 for(var i=0;i<count;i++){
  121.                         with(obj.elements[i]){
  122.                                 var _dataType = getAttribute("dataType");
  123.                                 if(typeof(_dataType) == "object" || typeof(this[_dataType]) == "undefined")  continue;
  124.                                 this.ClearState(obj.elements[i]);
  125.                                 if(getAttribute("require") == "false" && value == "") continue;
  126.                                 switch(_dataType){
  127.                                         case "Date" :
  128.                                         case "Repeat" :
  129.                                         case "Range" :
  130.                                         case "Compare" :
  131.                                         case "Custom" :
  132.                                         case "Group" :
  133.                                         case "Limit" :
  134.                                         case "LimitB" :
  135.                                         case "SafeString" :
  136.                                                 if(!eval(this[_dataType]))        {
  137.                                                         this.AddError(i, getAttribute("msg"));
  138.                                                 }
  139.                                                 break;
  140.                                         default :
  141.                                                 if(!this[_dataType].test(value)){
  142.                                                         this.AddError(i, getAttribute("msg"));
  143.                                                 }
  144.                                                 break;
  145.                                 }
  146.                         }
  147.                 }
  148.                 if(this.ErrorMessage.length > 1){
  149.                         mode = mode || 1;
  150.                         var errCount = this.ErrorItem.length;
  151.                         switch(mode){
  152.                         case 2 :
  153.                                 for(var i=1;i<errCount;i++)
  154.                                         this.ErrorItem[i].style.color = "red";
  155.                         case 1 :
  156.                                 alert(this.ErrorMessage.join("\n"));
  157.                                 this.ErrorItem[1].focus();
  158.                                 break;
  159.                         case 3 :
  160.                                 for(var i=1;i<errCount;i++){
  161.                                 try{
  162.                                         var span = document.createElement("SPAN");
  163.                                         span.id = "__ErrorMessagePanel";
  164.                                         span.style.color = "red";
  165.                                         this.ErrorItem[i].parentNode.appendChild(span);
  166.                                         span.innerHTML = this.ErrorMessage[i].replace(/\d+:/,"*");
  167.                                         }
  168.                                         catch(e){alert(e.description);}
  169.                                 }
  170.                                 this.ErrorItem[1].focus();
  171.                                 break;
  172.                         default :
  173.                                 alert(this.ErrorMessage.join("\n"));
  174.                                 break;
  175.                         }
  176.                         return false;
  177.                 }
  178.                 return true;
  179.         },
  180.         limit : function(len,min, max){
  181.                 min = min || 0;
  182.                 max = max || Number.MAX_VALUE;
  183.                 return min <= len && len <= max;
  184.         },
  185.         LenB : function(str){
  186.                 return str.replace(/[^\x00-\xff]/g,"**").length;
  187.         },
  188.         ClearState : function(elem){
  189.                 with(elem){
  190.                         if(style.color == "red")
  191.                                 style.color = "";
  192.                         var lastNode = parentNode.childNodes[parentNode.childNodes.length-1];
  193.                         if(lastNode.id == "__ErrorMessagePanel")
  194.                                 parentNode.removeChild(lastNode);
  195.                 }
  196.         },
  197.         AddError : function(index, str){
  198.                 this.ErrorItem[this.ErrorItem.length] = this.ErrorItem[0].elements[index];
  199.                 this.ErrorMessage[this.ErrorMessage.length] = this.ErrorMessage.length + ":" + str;
  200.         },
  201.         Exec : function(op, reg){
  202.                 return new RegExp(reg,"g").test(op);
  203.         },
  204.         compare : function(op1,operator,op2){
  205.                 switch (operator) {
  206.                         case "NotEqual":
  207.                                 return (op1 != op2);
  208.                         case "GreaterThan":
  209.                                 return (op1 > op2);
  210.                         case "GreaterThanEqual":
  211.                                 return (op1 >= op2);
  212.                         case "LessThan":
  213.                                 return (op1 < op2);
  214.                         case "LessThanEqual":
  215.                                 return (op1 <= op2);
  216.                         default:
  217.                                 return (op1 == op2);            
  218.                 }
  219.         },
  220.         MustChecked : function(name, min, max){
  221.                 var groups = document.getElementsByName(name);
  222.                 var hasChecked = 0;
  223.                 min = min || 1;
  224.                 max = max || groups.length;
  225.                 for(var i=groups.length-1;i>=0;i--)
  226.                         if(groups[i].checked) hasChecked++;
  227.                 return min <= hasChecked && hasChecked <= max;
  228.         },
  229.         IsDate : function(op, formatString){
  230.                 formatString = formatString || "ymd";
  231.                 var m, year, month, day;
  232.                 switch(formatString){
  233.                         case "ymd" :
  234.                                 m = op.match(new RegExp("^((\\d{4})|(\\d{2}))([-./])(\\d{1,2})\\4(\\d{1,2})$"));
  235.                                 if(m == null ) return false;
  236.                                 day = m[6];
  237.                                 month = m[5]--;
  238.                                 year =  (m[2].length == 4) ? m[2] : GetFullYear(parseInt(m[3], 10));
  239.                                 break;
  240.                         case "dmy" :
  241.                                 m = op.match(new RegExp("^(\\d{1,2})([-./])(\\d{1,2})\\2((\\d{4})|(\\d{2}))$"));
  242.                                 if(m == null ) return false;
  243.                                 day = m[1];
  244.                                 month = m[3]--;
  245.                                 year = (m[5].length == 4) ? m[5] : GetFullYear(parseInt(m[6], 10));
  246.                                 break;
  247.                         default :
  248.                                 break;
  249.                 }
  250.                 if(!parseInt(month)) return false;
  251.                 month = month==12 ?0:month;
  252.                 var date = new Date(year, month, day);
  253.         return (typeof(date) == "object" && year == date.getFullYear() && month == date.getMonth() && day == date.getDate());
  254.                 function GetFullYear(y){return ((y<30 ? "20" : "19") + y)|0;}
  255.         }
  256. }
复制代码
JavaScript, 集锦, 脚本, 经典, 效果
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 转播转播 分享分享 分享淘帖

相关帖子

台州维博网络(www.tzweb.com)专门运用PHP+MYSQL/ASP.NET+MSSQL技术开发网站门户平台系统等。
回复

使用道具 举报

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 注册

本版积分规则

网站推广
关于我们
  • 台州朗动科技(Tzweb.com)拥有多年开发网站平台系统门户手机客户端等业务的成功经验。主要从事：政企网站,系统平台,微信公众号,各类小程序,手机APP客户端,浙里办微应用,浙政钉微应用、主机域名、虚拟空间、后期维护等服务，满足不同企业公司的需求，是台州地区领先的网络技术服务商!

Hi,扫描关注我

Copyright © 2005-2026 站长论坛 All rights reserved

Powered by 站长论坛 with TZWEB Update Techonolgy Support

快速回复 返回顶部 返回列表