JS经典效果

于 2010-12-16 10:23:00 发布 · 152 阅读 · 1
文章标签：

#javascript #xhtml #操作系统 #ViewUI

脚本1：进入主页以后自动播放声音

  1. <embed src="pnm://10.13.31.90/~kayvin/mihunji.rm" hidden=true autostart=true loop=true>
复制代码


脚本2：进入主页后自动最大话,省的去在自己单击了


  1. <script>
  2. self.moveTo(0,0)
  3. self.resizeTo(screen.availWidth,screen.availHeight)
  4. </script>
复制代码


脚本3：显示现在

时间

的脚本


  1. <script language=vbscript>document.write now</script>
复制代码


脚本4：显示最后修改时间的脚本


  1. <script>document.write(document.lastModified)</script>
复制代码


脚本5：设为首页,加为收藏，加入频道,启动outlook发信


  1. <a style="cursor:hand"　
  2. onclick="this.style.behavior="url(#default#homepage)";
  3. this.setHomePage(http://10.13.31.90/~kayvin/);">">设为首页</a>
  5. <a style="cursor:hand"
  6. onclick="window.external.AddFavorite(location.href,document.title);">加入收藏</a>
  8. <a href=javascript:window.external.addChannel("typhoon.cdf")>加入频道</a>
  10. <a href="mailto:kayvin@sohu.com">与我联系</a>
复制代码


脚本6：状态栏动态显示现在时间


  1. <script>
  2. function see(){
  3. window.setTimeout("see()",1000);
  4. today = new Date();
  5. self.status = today.toString();
  6. }
  7. </script>
  8. <body onload=see()>
复制代码


脚本7：关闭窗口的脚本


  1. <a href=javascript:close()>[关闭窗口]</a>
复制代码


脚本8：按下F12键,直接返回首页


  1. <script>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}
  6. </script>
复制代码


脚本9：后退,刷新,前进


  1. <input type=button value=后退 onclick=history.go(-1)>
  3. <input type=button value=刷新 onclick=history.go(-0)>
  5. <input type=button value=前进 onclick=history.go(+1)>
复制代码



脚本10：设定时间弹出窗口,4000=4秒,当然你可以自定义


  1. <script>function l()
  2. {
  3. window.open(" 10.13.31.90/~kayvin/ ","name","width=500,height=150,border=0")
  4. }
  5. setTimeout("l()",4000)
  7. </script>
复制代码


二 鼠标旁边的提示信息,类似与163登录后的

页面

提示

效果

：


  1. <a href="#" title="这是提示">tip</a>
  2. <script Language="JavaScript">
  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("<style type='text/css'id='defaultPopStyle'>");
  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("</style>");
  17. document.write("<div id='dypopLayer' style='position:absolute;z-index:1000;' class='cPopText'></div>");
  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;
  74. </script>
复制代码


三 如果文字过长,则将过长的部分变成省略号显示：


  1. <DIV STYLE="width: 120px; height: 50px; border: 1px solid blue;
  2. overflow: hidden; text-overflow:ellipsis">
  3. <NOBR>就是比如有一行文字，很长，表格内一行显示不下.</NOBR>
  4. </DIV>
复制代码


四 滚动的图片


  1. <script language="javascript">
  2. imgArr=new Array()
  3. imgArr[0]="<a href=# onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=http://mc.mapabc.com/mapcard/images/LP_card_1.gif border=0></a>"
  4. imgArr[1]="<a href=# onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=http://mc.mapabc.com/mapcard/images/LP_card_1.gif border=0></a>"
  5. imgArr[2]="<a href=# onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=http://mc.mapabc.com/mapcard/images/LP_card_1.gif border=0></a>"
  6. imgArr[3]="<a href=# onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=http://mc.mapabc.com/mapcard/images/LP_card_1.gif border=0></a>"
  7. imgArr[4]="<a href=# onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=http://mc.mapabc.com/mapcard/images/LP_card_1.gif border=0></a>"
  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)
  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")
  69. startDnum=(++startDnum)%imgArr.length
  70. nextDnum=(startDnum+displayImgAmount)%imgArr.length
  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. }
  86. startDivClipLeft=parseInt(eval("document.all.divAds"+startDnum+".currentStyle.clipLeft"))
  87. nextDivClipRight=parseInt(eval("document.all.divAds"+nextDnum+".currentStyle.clipRight"))
  89. if (startDivClipLeft+moveStep>divWidth){
  90. eval("document.all.divAds"+nextDnum+".style.clip='rect(0,"+divWidth+","+divHeight+",0"+")'")
  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)
  95. startDnum=(++startDnum)%imgArr.length
  96. nextDnum=(startDnum+displayImgAmount)%imgArr.length
  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. }
  115. }
  117. function writeDivs(){
  118. if (ns4){
  119. document.write("<ilayer name=divOuter width=750 height="+divHeight+">")
  121. for (i=0;i<imgArr.length;i++){
  122. document.write("<layer name=divAds"+i+">")
  123. document.write(imgArr[i]+" ")
  124. document.write("</layer>")
  125. }
  126. document.write("</ilayer>")
  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("<div id=divOuter style='position:relative' width=750 height="+divHeight+">")
  134. for (i=0;i<imgArr.length;i++){
  135. document.write("<div id=divAds"+i+" style='position:absolute;clip:rect(0,"+divWidth+","+divHeight+",0)'>")
  136. document.write(imgArr[i]+" ")
  137. document.write("</div>")
  138. }
  139. document.write("</div>")
  140. for (i=displayImgAmount;i<imgArr.length;i++){
  141. eval("document.all.divAds"+i+".style.clip='rect(0,0,"+divHeight+",0)'")
  142. }
  143. }
  144. }
  145. </script>
  146. <BODY onload=javascript:mvStart()>
  147. <SCRIPT language=javascript>writeDivs();initDivPlace();</SCRIPT>
复制代码


五 接收键盘指令的脚本:


  1. <SCRIPT language="JavaScript">
  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. //-->
  19. </SCRIPT>
  22. onkeydown="javascript:onenter();"
  24. function onenter(){
  25. if(event.keyCode==13){
  26. alert("回车");
  27. }
  28. }
复制代码


六 让你的文本链接渐隐渐显:


  1. <META NAME="Description" CONTENT="">
  2. </HEAD>
  4. <BODY>
  5. <script language="javascript" type="text/javascript">
  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. }
  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. }
  110. </script>
  112. </BODY>
  113. </HTML>
  114. <A HREF="">让你的文本链接渐隐渐显</A>
复制代码


七 类似与QQ的好友/黑名单之类的树型菜单_极品:


  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2. <HTML>
  3. <HEAD>
  4. <TITLE> New Document </TITLE>
  5. <META NAME="Generator" CONTENT="EditPlus">
  6. <META NAME="Author" CONTENT="">
  7. <META NAME="Keywords" CONTENT="">
  8. <META NAME="Description" CONTENT="">
  9. </HEAD>
  11. <BODY>
  12. <script>
  13. if (!document.getElementById)
  14. document.getElementById = function() { return null; }
  16. function initializeMenu(menuId, actuatorId) {
  17. var menu = document.getElementById(menuId);
  18. var actuator = document.getElementById(actuatorId);
  20. if (menu == null || actuator == null) return;
  22. //if (window.opera) return; // I'm too tired
  24. actuator.parentNode.style.backgroundImage = "url(/images/plus.gif)";
  25. actuator.onclick = function() {
  26. var display = menu.style.display;
  27. this.parentNode.style.backgroundImage =
  28. (display == "block") ? "url(/images/plus.gif)" : "url(/images/minus.gif)";
  29. menu.style.display = (display == "block") ? "none" : "block";
  31. return false;
  32. }
  33. }
  34. window.onload = function() {
  35. initializeMenu("productsMenu", "productsActuator");
  36. initializeMenu("newPhonesMenu", "newPhonesActuator");
  37. initializeMenu("compareMenu", "compareActuator");
  38. }
  39. </script>
  40. <style>
  41. body {
  42. font-family: verdana, helvetica, arial, sans-serif;
  43. }
  45. #mainMenu {
  46. background-color: #EEE;
  47. border: 1px solid #CCC;
  48. color: #000;
  49. width: 203px;
  50. }
  52. #menuList {
  53. margin: 0px;
  54. padding: 10px 0px 10px 15px;
  55. }
  57. li.menubar {
  58. background: url(/images/plus.gif) no-repeat 0em 0.3em;
  59. font-size: 12px;
  60. line-height: 1.5em;
  61. list-style: none outside;
  62. }
  64. .menu, .submenu {
  65. display: none;
  66. margin-left: 15px;
  67. padding: 0px;
  68. }
  70. .menu li, .submenu li {
  71. background: url(/images/square.gif) no-repeat 0em 0.3em;
  72. list-style: none outside;
  73. }
  75. a.actuator {
  76. background-color: transparent;
  77. color: #000;
  78. font-size: 12px;
  79. padding-left: 15px;
  80. text-decoration: none;
  81. }
  83. a.actuator:hover {
  84. text-decoration: underline;
  85. }
  87. .menu li a, .submenu li a {
  88. background-color: transparent;
  89. color: #000;
  90. font-size: 12px;
  91. padding-left: 15px;
  92. text-decoration: none;
  93. }
  95. .menu li a:hover, submenu li a:hover {
  96. /*border-bottom: 1px dashed #000;*/
  97. text-decoration: underline;
  98. }
  100. span.key {
  101. text-decoration: underline;
  102. }
  103. </style>
  104. </head>
  105. <body>
  106. <div id="mainMenu">
  107. <ul id="menuList">
  108. <li class="menubar">
  109. <a href="#" id="productsActuator" class="actuator">图秀地带收藏夹</a>
  110. <ul id="productsMenu" class="menu">
  111. <li>
  112. <a href="#" id="newPhonesActuator" class="actuator">我的好友</a>
  113. <ul id="newPhonesMenu" class="submenu">
  114. <li><a href="http://mc.mapabc.com/mapcard/card.jsp?pp=1000000001">张三[10000001]</a></li>
  115. <li><a href="http://mc.mapabc.com/mapcard/card.jsp?pp=1000000001">李四[10000002]</a></li>
  116. <li><a href="http://mc.mapabc.com/mapcard/card.jsp?pp=1000000001">张三[10000001]</a></li>
  117. <li><a href="http://mc.mapabc.com/mapcard/card.jsp?pp=1000000001">李四[10000002]</a></li>
  118. </ul>
  119. </li>
  120. <li>
  121. <a href="#" id="compareActuator" class="actuator">陌生人</a>
  122. <ul id="compareMenu" class="submenu">
  123. <li><a href="http://mc.mapabc.com/mapcard/card.jsp?pp=1000000001">张三[10000001]</a></li>
  124. <li><a href="http://mc.mapabc.com/mapcard/card.jsp?pp=1000000001">李四[10000002]</a></li>
  125. <li><a href="http://mc.mapabc.com/mapcard/card.jsp?pp=1000000001">张三[10000001]</a></li>
  126. <li><a href="http://mc.mapabc.com/mapcard/card.jsp?pp=1000000001">李四[10000002]</a></li>
  127. </ul>
  128. </li>
  129. </ul>
  130. </li>
  131. </ul>
  132. </div>
  133. </body>
  134. </BODY>
  135. </HTML>
复制代码


八 很多的脚本翻页:


  1. <!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5. <title> JavaScript: showPages v1.0 [by Lapuasi.com]</title>
  6. <script language="JavaScript">
  7. <!--
  8. /*
  10. showPages v1.1
  11. =================================
  13. Infomation
  14. ----------------------
  15. Author : Lapuasi
  16. E-Mail : lapuasi@gmail.com
  17. Web : http://www.lapuasi.com
  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 += '<span class="count">Pages: ' + this.page + ' / ' + this.pageCount + '</span>';
  61. strHtml += '<span class="number">';
  62. if (prevPage < 1) {
  63. strHtml += '<span title="First Page">&laquo;</span>';
  64. strHtml += '<span title="Prev Page">‹</span>';
  65. } else {
  66. strHtml += '<span title="First Page"><a href="javascript:' + this.name + '.toPage(1);">&laquo;</a></span>';
  67. strHtml += '<span title="Prev Page"><a href="javascript:' + this.name + '.toPage(' + prevPage + ');">‹</a></span>';
  68. }
  69. for (var i = 1; i <= this.pageCount; i++) {
  70. if (i > 0) {
  71. if (i == this.page) {
  72. strHtml += '<span title="Page ' + i + '">[' + i + ']</span>';
  73. } else {
  74. strHtml += '<span title="Page ' + i + '"><a href="javascript:' + this.name + '.toPage(' + i + ');">[' + i + ']</a></span>';
  75. }
  76. }
  77. }
  78. if (nextPage > this.pageCount) {
  79. strHtml += '<span title="Next Page">›</span>';
  80. strHtml += '<span title="Last Page">&raquo;</span>';
  81. } else {
  82. strHtml += '<span title="Next Page"><a href="javascript:' + this.name + '.toPage(' + nextPage + ');">›</a></span>';
  83. strHtml += '<span title="Last Page"><a href="javascript:' + this.name + '.toPage(' + this.pageCount + ');">&raquo;</a></span>';
  84. }
  85. strHtml += '</span><br />';
  86. break;
  87. case 1 : //模式1 (10页缩略,首页,前页,后页,尾页)
  88. strHtml += '<span class="count">Pages: ' + this.page + ' / ' + this.pageCount + '</span>';
  89. strHtml += '<span class="number">';
  90. if (prevPage < 1) {
  91. strHtml += '<span title="First Page">&laquo;</span>';
  92. strHtml += '<span title="Prev Page">‹</span>';
  93. } else {
  94. strHtml += '<span title="First Page"><a href="javascript:' + this.name + '.toPage(1);">&laquo;</a></span>';
  95. strHtml += '<span title="Prev Page"><a href="javascript:' + this.name + '.toPage(' + prevPage + ');">‹</a></span>';
  96. }
  97. if (this.page % 10 ==0) {
  98. var startPage = this.page - 9;
  99. } else {
  100. var startPage = this.page - this.page % 10 + 1;
  101. }
  102. if (startPage > 10) strHtml += '<span title="Prev 10 Pages"><a href="javascript:' + this.name + '.toPage(' + (startPage - 1) + ');">...</a></span>';
  103. for (var i = startPage; i < startPage + 10; i++) {
  104. if (i > this.pageCount) break;
  105. if (i == this.page) {
  106. strHtml += '<span title="Page ' + i + '">[' + i + ']</span>';
  107. } else {
  108. strHtml += '<span title="Page ' + i + '"><a href="javascript:' + this.name + '.toPage(' + i + ');">[' + i + ']</a></span>';
  109. }
  110. }
  111. if (this.pageCount >= startPage + 10) strHtml += '<span title="Next 10 Pages"><a href="javascript:' + this.name + '.toPage(' + (startPage + 10) + ');">...</a></span>';
  112. if (nextPage > this.pageCount) {
  113. strHtml += '<span title="Next Page">›</span>';
  114. strHtml += '<span title="Last Page">&raquo;</span>';
  115. } else {
  116. strHtml += '<span title="Next Page"><a href="javascript:' + this.name + '.toPage(' + nextPage + ');">›</a></span>';
  117. strHtml += '<span title="Last Page"><a href="javascript:' + this.name + '.toPage(' + this.pageCount + ');">&raquo;</a></span>';
  118. }
  119. strHtml += '</span><br />';
  120. break;
  121. case 2 : //模式2 (前后缩略,页数,首页,前页,后页,尾页)
  122. strHtml += '<span class="count">Pages: ' + this.page + ' / ' + this.pageCount + '</span>';
  123. strHtml += '<span class="number">';
  124. if (prevPage < 1) {
  125. strHtml += '<span title="First Page">&laquo;</span>';
  126. strHtml += '<span title="Prev Page">‹</span>';
  127. } else {
  128. strHtml += '<span title="First Page"><a href="javascript:' + this.name + '.toPage(1);">&laquo;</a></span>';
  129. strHtml += '<span title="Prev Page"><a href="javascript:' + this.name + '.toPage(' + prevPage + ');">‹</a></span>';
  130. }
  131. if (this.page != 1) strHtml += '<span title="Page 1"><a href="javascript:' + this.name + '.toPage(1);">[1]</a></span>';
  132. if (this.page >= 5) strHtml += '<span>...</span>';
  133. if (this.pageCount > this.page + 2) {
  134. var endPage = this.page + 2;
  135. } else {
  136. var endPage = this.pageCount;
  137. }
  138. for (var i = this.page - 2; i <= endPage; i++) {
  139. if (i > 0) {
  140. if (i == this.page) {
  141. strHtml += '<span title="Page ' + i + '">[' + i + ']</span>';
  142. } else {
  143. if (i != 1 && i != this.pageCount) {
  144. strHtml += '<span title="Page ' + i + '"><a href="javascript:' + this.name + '.toPage(' + i + ');">[' + i + ']</a></span>';
  145. }
  146. }
  147. }
  148. }
  149. if (this.page + 3 < this.pageCount) strHtml += '<span>...</span>';
  150. if (this.page != this.pageCount) strHtml += '<span title="Page ' + this.pageCount + '"><a href="javascript:' + this.name + '.toPage(' + this.pageCount + ');">[' + this.pageCount + ']</a></span>';
  151. if (nextPage > this.pageCount) {
  152. strHtml += '<span title="Next Page">›</span>';
  153. strHtml += '<span title="Last Page">&raquo;</span>';
  154. } else {
  155. strHtml += '<span title="Next Page"><a href="javascript:' + this.name + '.toPage(' + nextPage + ');">›</a></span>';
  156. strHtml += '<span title="Last Page"><a href="javascript:' + this.name + '.toPage(' + this.pageCount + ');">&raquo;</a></span>';
  157. }
  158. strHtml += '</span><br />';
  159. break;
  160. case 3 : //模式3 (箭头样式,首页,前页,后页,尾页) (only IE)
  161. strHtml += '<span class="count">Pages: ' + this.page + ' / ' + this.pageCount + '</span>';
  162. strHtml += '<span class="arrow">';
  163. if (prevPage < 1) {
  164. strHtml += '<span title="First Page">9</span>';
  165. strHtml += '<span title="Prev Page">7</span>';
  166. } else {
  167. strHtml += '<span title="First Page"><a href="javascript:' + this.name + '.toPage(1);">9</a></span>';
  168. strHtml += '<span title="Prev Page"><a href="javascript:' + this.name + '.toPage(' + prevPage + ');">7</a></span>';
  169. }
  170. if (nextPage > this.pageCount) {
  171. strHtml += '<span title="Next Page">8</span>';
  172. strHtml += '<span title="Last Page">:</span>';
  173. } else {
  174. strHtml += '<span title="Next Page"><a href="javascript:' + this.name + '.toPage(' + nextPage + ');">8</a></span>';
  175. strHtml += '<span title="Last Page"><a href="javascript:' + this.name + '.toPage(' + this.pageCount + ');">:</a></span>';
  176. }
  177. strHtml += '</span><br />';
  178. break;
  179. case 4 : //模式4 (下拉框)
  180. if (this.pageCount < 1) {
  181. strHtml += '<select name="toPage" disabled>';
  182. strHtml += '<option value="0">No Pages</option>';
  183. } else {
  184. var chkSelect;
  185. strHtml += '<select name="toPage" onchange="' + this.name + '.toPage(this);">';
  186. for (var i = 1; i <= this.pageCount; i++) {
  187. if (this.page == i) chkSelect=' selected="selected"';
  188. else chkSelect='';
  189. strHtml += '<option value="' + i + '"' + chkSelect + '>Pages: ' + i + ' / ' + this.pageCount + '</option>';
  190. }
  191. }
  192. strHtml += '</select>';
  193. break;
  194. case 5 : //模式5 (输入框)
  195. strHtml += '<span class="input">';
  196. if (this.pageCount < 1) {
  197. strHtml += '<input type="text" name="toPage" value="No Pages" class="itext" disabled="disabled">';
  198. strHtml += '<input type="button" name="go" value="GO" class="ibutton" disabled="disabled"></option>';
  199. } else {
  200. strHtml += '<input type="text" value="Input Page:" class="ititle" readonly="readonly">';
  201. strHtml += '<input type="text" id="pageInput' + this.showTimes + '" value="' + this.page + '" class="itext" title="Input page" onkeypress="return ' + this.name + '.formatInputPage(event);" onfocus="this.select()">';
  202. strHtml += '<input type="text" value=" / ' + this.pageCount + '" class="icount" readonly="readonly">';
  203. strHtml += '<input type="button" name="go" value="GO" class="ibutton" onclick="' + this.name + '.toPage(document.getElementById(/'pageInput' + this.showTimes + '/').value);"></option>';
  204. }
  205. strHtml += '</span>';
  206. break;
  207. default :
  208. strHtml = 'Javascript showPage Error: not find mode ' + mode;
  209. break;
  210. }
  211. return strHtml;
  212. }
  213. showPages.prototype.createUrl = function (page) { //生成页面跳转url
  214. if (isNaN(parseInt(page))) page = 1;
  215. if (page < 1) page = 1;
  216. if (page > this.pageCount) page = this.pageCount;
  217. var url = location.protocol + '//' + location.host + location.pathname;
  218. var args = location.search;
  219. var reg = new RegExp('([/?&]?)' + this.argName + '=[^&]*[&$]?', 'gi');
  220. args = args.replace(reg,'$1');
  221. if (args == '' || args == null) {
  222. args += '?' + this.argName + '=' + page;
  223. } else if (args.substr(args.length - 1,1) == '?' || args.substr(args.length - 1,1) == '&') {
  224. args += this.argName + '=' + page;
  225. } else {
  226. args += '&' + this.argName + '=' + page;
  227. }
  228. return url + args;
  229. }
  230. showPages.prototype.toPage = function(page){ //页面跳转
  231. var turnTo = 1;
  232. if (typeof(page) == 'object') {
  233. turnTo = page.options[page.selectedIndex].value;
  234. } else {
  235. turnTo = page;
  236. }
  237. self.location.href = this.createUrl(turnTo);
  238. }
  239. showPages.prototype.printHtml = function(mode){ //显示html代码
  240. this.getPage();
  241. this.checkPages();
  242. this.showTimes += 1;
  243. document.write('<div id="pages_' + this.name + '_' + this.showTimes + '" class="pages"></div>');
  244. document.getElementById('pages_' + this.name + '_' + this.showTimes).innerHTML = this.createHtml(mode);
  246. }
  247. showPages.prototype.formatInputPage = function(e){ //限定输入页数格式
  248. var ie = navigator.appName=="Microsoft Internet Explorer"?true:false;
  249. if(!ie) var key = e.which;
  250. else var key = event.keyCode;
  251. if (key == 8 || key == 46 || (key >= 48 && key <= 57)) return true;
  252. return false;
  253. }
  254. //-->
  255. </script>
  256. <style>
  257. /* Pages Main Tyle */
  258. .pages {
  259. color: #000000;
  260. cursor: default;
  261. font-size: 10px;
  262. font-family: Tahoma, Verdana;
  263. padding: 3px 0px 3px 0px;
  264. }
  265. .pages .count, .pages .number, .pages .arrow {
  266. color: #000000;
  267. font-size: 10px;
  268. background-color: #F7F7F7;
  269. border: 1px solid #CCCCCC;
  270. }
  271. /* Page and PageCount Style */
  272. .pages .count {
  273. font-weight: bold;
  274. border-right: none;
  275. padding: 2px 10px 1px 10px;
  276. }
  277. /* Mode 0,1,2 Style (Number) */
  278. .pages .number {
  279. font-weight: normal;
  280. padding: 2px 10px 1px 10px;
  281. }
  282. .pages .number a, .pages .number span {
  283. font-size: 10px;
  284. }
  285. .pages .number span {
  286. color: #999999;
  287. margin: 0px 3px 0px 3px;
  288. }
  289. .pages .number a {
  290. color: #000000;
  291. text-decoration: none;
  292. }
  293. .pages .number a:hover {
  294. color: #0000ff;
  295. }
  296. /* Mode 3 Style (Arrow) */
  297. .pages .arrow {
  298. font-weight: normal;
  299. padding: 0px 5px 0px 5px;
  300. }
  301. .pages .arrow a, .pages .arrow span {
  302. font-size: 10px;
  303. font-family: Webdings;
  304. }
  305. .pages .arrow span {
  306. color: #999999;
  307. margin: 0px 5px 0px 5px;
  308. }
  309. .pages .arrow a {
  310. color: #000000;
  311. text-decoration: none;
  312. }
  313. .pages .arrow a:hover {
  314. color: #0000ff;
  315. }
  316. /* Mode 4 Style (Select) */
  317. .pages select, .pages input {
  318. color: #000000;
  319. font-size: 10px;
  320. font-family: Tahoma, Verdana;
  321. }
  322. /* Mode 5 Style (Input) */
  323. .pages .input input.ititle, .pages .input input.itext, .pages .input input.icount {
  324. color: #666666;
  325. font-weight: bold;
  326. background-color: #F7F7F7;
  327. border: 1px solid #CCCCCC;
  328. }
  329. .pages .input input.ititle {
  330. width: 70px;
  331. text-align: right;
  332. border-right: none;
  333. }
  334. .pages .input input.itext {
  335. width: 25px;
  336. color: #000000;
  337. text-align: right;
  338. border-left: none;
  339. border-right: none;
  340. }
  341. .pages .input input.icount {
  342. width: 35px;
  343. text-align: left;
  344. border-left: none;
  345. }
  346. .pages .input input.ibutton {
  347. height: 17px;
  348. color: #FFFFFF;
  349. font-weight: bold;
  350. font-family: Verdana;
  351. background-color: #999999;
  352. border: 1px solid #666666;
  353. padding: 0px 0px 2px 1px;
  354. margin-left: 2px;
  355. cursor: hand;
  356. }
  358. /* body */
  359. body {
  360. font-size: 12px;
  361. }
  362. </style>
  363. </head>
  365. <body>
  366. <script language="JavaScript">
  367. <!--
  368. var pg = new showPages('pg');
  369. pg.pageCount =12;// 定义总页数(必要)
  370. //pg.argName = 'p';// 定义参数名(可选,默认为page)
  372. document.write('<br>Show Times: ' + pg.showTimes + ', Mood Default');
  373. pg.printHtml();
  374. document.write('<br>Show Times: ' + pg.showTimes + ', Mood 0');
  375. pg.printHtml(0);
  376. document.write('<br>Show Times: ' + pg.showTimes + ', Mood 1');
  377. pg.printHtml(1);
  378. document.write('<br>Show Times: ' + pg.showTimes + ', Mood 2');
  379. pg.printHtml(2);
  380. document.write('<br>Show Times: ' + pg.showTimes + ', Mood 3 (only IE)');
  381. pg.printHtml(3);
  382. document.write('<br>Show Times: ' + pg.showTimes + ', Mood 4');
  383. pg.printHtml(4);
  384. document.write('<br>Show Times: ' + pg.showTimes + ', Mood 5');
  385. pg.printHtml(5);
  386. //-->
  387. </script>
  388. </body>
  389. </html>
复制代码


九 DIV的透明层实现:


  1. <body bgcolor="#ff0ddd">
  2. <div id="Layer1" style="position:absolute; width:260px; height:115px; z-index:1; left: 50px; top: 77px; filter:Alpha(opacity=30)">
  3. <table width="96%" border="1" cellpadding="1" cellspacing="1" bordercolor="#FFFFFF" bgcolor="#999999">
  4. <tr>
  6. <td height="25" bgcolor="#f5f5f5" class="13">你也可以在这里插入图片</td>
  7. </tr>
  8. <tr>
  10. <td height="20" bgcolor="#f5f5f5" class="12">你想注册地图名片吗</td>
  11. </tr>
  12. <tr>
  14. <td height="20" bgcolor="#f5f5f5" class="12">http://mc.mapabc.com</td>
  15. </tr>
  16. <tr>
  18. <td height="20" bgcolor="#f5f5f5" class="12">EMAIL:lipeng@mapabc.com</td>
  19. </tr>
  20. <tr>
  22. <td height="20" bgcolor="#f5f5f5" class="12">地址</td>
  23. </tr>
  24. <tr>
  26. <td height="20" bgcolor="#f5f5f5" class="12">邮编</td>
  27. </tr>
  28. </table>
  29. </div>
复制代码


十 超级强大的

表单

验证：


  1. <title>表单验证类 Validator v1.01</title>
  2. <style>
  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}
  10. </style>
  11. <table align="center">
  12. <form name="theForm" id="demo" action="" method="get" onSubmit="return Validator.Validate(this,2)">
  13. <tr>
  14. <td>真实姓名：</td><td><input name="Name" dataType="Chinese" msg="真实姓名只允许中文"></td>
  15. </tr>
  16. <tr>
  17. <td>英文名：</td><td><input name="Nick" dataType="English" require="false" msg="英文名只允许英文字母"></td>
  18. </tr>
  19. <tr>
  20. <td>主页：</td><td><input name="Homepage" require="false" dataType="Url" msg="非法的Url"></td>
  21. </tr>
  22. <tr>
  23. <td>密码：</td><td><input name="Password" dataType="SafeString" msg="密码不符合安全规则" type="password"></td>
  24. </tr>
  25. <tr>
  26. <td>重复：</td><td><input name="Repeat" dataType="Repeat" to="Password" msg="两次输入的密码不一致" type="password"></td>
  27. </tr>
  28. <tr>
  29. <td>信箱：</td><td><input name="Email" dataType="Email" msg="信箱格式不正确"></td>
  30. </tr>
  31. <tr>
  32. <td>信箱：</td><td><input name="Email" dataType="Repeat" to="Email" msg="两次输入的信箱不一致"></td>
  33. </tr>
  34. <tr>
  35. <td>QQ：</td><td><input name="QQ" require="false" dataType="QQ" msg="QQ号码不存在"></td>
  36. </tr>
  37. <tr>
  38. <td>身份证：</td><td><input name="Card" dataType="IdCard" msg="身份证号码不正确"></td>
  39. </tr>
  40. <tr>
  41. <td>年龄：</td><td><input name="Year" dataType="Range" msg="年龄必须在18~28之间" min="18" max="28"></td>
  42. </tr>
  43. <tr>
  44. <td>年龄1：</td><td><input name="Year1" require="false" dataType="Compare" msg="年龄必须在18以上" to="18" operator="GreaterThanEqual"></td>
  45. </tr>
  46. <tr>
  47. <td>电话：</td><td><input name="Phone" require="false" dataType="Phone" msg="电话号码不正确"></td>
  48. </tr>
  49. <tr>
  50. <td>手机：</td><td><input name="Mobile" require="false" dataType="Mobile" msg="手机号码不正确"></td>
  51. </tr>
  52. <tr>
  53. <td>生日：</td><td><input name="Birthday" dataType="Date" format="ymd" msg="生日日期不存在"></td>
  54. </tr>
  55. <tr>
  56. <td>邮政编码：</td><td><input name="Zip" dataType="Custom" regexp="^[1-9]/d{5}$" msg="邮政编码不存在"></td>
  57. </tr>
  58. <tr>
  59. <td>邮政编码：</td><td><input name="Zip1" dataType="Zip" msg="邮政编码不存在"></td>
  60. </tr>
  61. <tr>
  62. <td>操作系统：</td><td><select name="Operation" dataType="Require"msg="未选择所用操作系统" ><option value="">选择您所用的操作系统</option><option value="Win98">Win98</option><option value="Win2k">Win2k</option><option value="WinXP">WinXP</option></select></td>
  63. </tr>
  64. <tr>
  65. <td>所在省份：</td><td>广东<input name="Province" value="1" type="radio">陕西<input name="Province" value="2" type="radio">浙江<input name="Province" value="3" type="radio">江西<input name="Province" value="4" type="radio" dataType="Group"msg="必须选定一个省份" ></td>
  66. </tr>
  67. <tr>
  68. <td>爱好：</td><td>运动<input name="Favorite" value="1" type="checkbox">上网<input name="Favorite" value="2" type="checkbox">听音乐<input name="Favorite" value="3" type="checkbox">看书<input name="Favorite" value="4" type="checkbox"" dataType="Group" min="2" max="3"msg="必须选择2~3种爱好"></td>
  69. </tr>
  70. <td>自我介绍：</td><td><textarea name="Description" dataType="Limit" max="10"msg="自我介绍内容必须在10个字之内">中文是一个字</textarea></td>
  71. </tr>
  72. <td>自传：</td><td><textarea name="History" dataType="LimitB" min="3" max="10"msg="自传内容必须在[3,10]个字节之内">中文是两个字节t</textarea></td& gt;
  73. </tr>
  74. <tr>
  75. <td colspan="2"><input name="Submit" type="submit" value="确定提交"><input onClick="Validator.Validate(document.getElementById('demo'))" value="检验模式1" type="button"><input onClick="Validator.Validate(document.getElementById('demo'),2)" value="检验模式2" type="button"><input onClick="Validator.Validate(document.getElementById('demo'),3)" value="检验模式3" type="button"></td>
  76. </tr>
  77. </form>
  78. </table>
  79. <script>
  80. /*************************************************
  81. Validator v1.01
  82. code by 我佛山人
  83. wfsr@cunite.com
  84. http://www.cunite.com
  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. }
  257. </script>
iteye_20271
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值