[js]javascript中最常用经典技巧(三)

41、email地址的分割

把如下代码加入<body>区域中

<a href="mailto:webmaster@sina.com">webmaster@sina.com</a>

42、流动边框效果的表格

把如下代码加入<body>区域中

<SCRIPT>
    l=Array(6,7,8,9,‘a‘,‘b‘,‘b‘,‘c‘,‘d‘,‘e‘,‘f‘)
    Nx=5;Ny=35
    t="<table border=0 cellspacing=0 cellpadding=0 height="+((Nx+2)*16)+"><tr>"
    for(x=Nx;x<Nx+Ny;x++)
    t+="<td width=16 id=a_mo"+x+"> </td>"
    t+="</tr><tr><td width=10 id=a_mo"+(Nx-1)+"> </td><td colspan="+(Ny-2)+" rowspan="+(Nx)+"> </td><td width=16 id=a_mo"+(Nx+Ny)+"></td></tr>"
    for(x=2;x<=Nx;x++)
    t+="<tr><td width=16 id=a_mo"+(Nx-x)+"> </td><td width=16 id=a_mo"+(Ny+Nx+x-1)+"> </td></tr>"
    t+="<tr>"
    for(x=Ny;x>0;x--)
    t+="<td width=16 id=a_mo"+(x+Nx*2+Ny-1)+"> </td>"
    ***(t+"</tr></table>")
    var N=Nx*2+Ny*2
    function f1(y){
    for(i=0;i<N;i++){
    c=(i+y)%20;if(c>10)c=20-c
    document.all["a_mo"+(i)].bgColor=""""#0000"+l[c]+l[c]+"‘"}
    y++
    setTimeout(‘f1(‘+y+‘)‘,‘1‘)}
    f1(1)
</SCRIPT>

43、JavaScript主页弹出窗口技巧

窗口中间弹出

<script>
window.open("http://www.cctv.com","","width=400,height=240,top="+(screen.availHeight-240)/2+",left="+(screen.availWidth-400)/2);
</script>
============
<html>
    <head>
    <script language="LiveScript">
    function WinOpen() {
        msg=open("","DisplayWindow","toolbar=no,directories=no,menubar=no");
        msg.***("<HEAD><TITLE>哈 罗!</TITLE></HEAD>");
        msg.***("<CENTER><H1>酷 毙 了!</H1><h2>这 是<B>JavaScript</B>所 开 的 视 窗!</h2></CENTER>");
    }
    </script>
    </head>
    <body>
        <form>
            <input type="button" name="Button1" value="Push me" onclick="WinOpen()">
        </form>
    </body>
</html>

==============

一、在下面的代码中,你只要单击打开一个窗口,即可链接到赛迪网。而当你想关闭时,只要单击一下即可关闭刚才打开的窗口。

  代码如下: 

  

<SCRIPT language="JavaScript"> 
  <!-- 
  function openclk() { 
      another=open(‘1000){this.resized=true;this.style.width=1000;}" align=absMiddle border=0>http://www.ccidnet.com‘,‘NewWindow‘); 
  } 
  function closeclk() { 
      another.close(); 
  } 
  //--> 
  </SCRIPT> 
  <FORM> 
  <INPUT TYPE="BUTTON" NAME="open" value="/打开一个窗口" onClick="openclk()"> 
  <BR> 
  <INPUT TYPE="BUTTON" NAME="close" value="/blog/关闭这个窗口" onClick="closeclk()"> 
  </FORM>

  二、上面的代码也太静了,为何不来点动感呢?如果能给页面来个降落效果那该多好啊! 

  代码如下: 

  

<script> 
  function drop(n) { 
      if(self.moveBy){ 
          self.moveBy (0,-900); 
          for(i = n; i > 0; i--){ 
              self.moveBy(0,3); 
          } 
          for(j = 8; j > 0; j--){ 
              self.moveBy(0,j); 
              self.moveBy(j,0); 
              self.moveBy(0,-j); 
              self.moveBy(-j,0); 
          } 
      } 
  } 
  </script> 
  <body onLoad="drop(300)">

  三、讨厌很多网站总是按照默认窗口打开,如果你能随心所欲控制打开的窗口那该多好。 

  代码如下: 

  

<SCRIPT LANGUAGE="JavaScript"> 
  <!-- Begin 
  function popupPage(l, t, w, h) { 
      var windowprops = "location=no,scrollbars=no,menubars=no,toolbars=no,resizable=yes" + 
      ",left=" + l + ",top=" + t + ",width=" + w + ",height=" + h; 
      var URL = "http://www.80cn.com"; 
      popup = window.open(URL,"MenuPopup",windowprops); 
  } 
  // End --> 
  </script> 
  <table> 
      <tr> 
          <td> 
              <form name=popupform> 
                  <pre> 
                  打开页面的参数<br> 
                  离开左边的距离: <input type=text name=left size=2 maxlength=4> pixels 
                  离开右边的距离: <input type=text name=top size=2 maxlength=4> pixels 
                  窗口的宽度: <input type=text name=width size=2 maxlength=4> pixels 
                  窗口的高度: <input type=text name=height size=2 maxlength=4> pixels 
                  </pre> 
                  <center> 
                  <input type=button value="打开这个窗口!" onClick="popupPage(this.form.left.value, this.form.top.value, this.form.width.value,
                this.form.height.value)"> 
                  </center> 
              </form> 
          </td> 
      </tr> 
  </table>

你只要在相对应的对话框中输入一个数值即可,将要打开的页面的窗口控制得很好。

44、页面的打开移动

把如下代码加入<body>区域中

<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
    for (t = 2; t > 0; t--) {
        for (x = 20; x > 0; x--) {
            for (y = 10; y > 0; y--) {
                parent.moveBy(0,-x);
       }
    }
    for (x = 20; x > 0; x--) {
        for (y = 10; y > 0; y--) {
            parent.moveBy(0,x);
       }
    }
    for (x = 20; x > 0; x--) {
        for (y = 10; y > 0; y--) {
            parent.moveBy(x,0);
       }
    }
    for (x = 20; x > 0; x--) {
        for (y = 10; y > 0; y--) {
            parent.moveBy(-x,0);
         }
       } 
    }
//-->
//   End -->
</script>

45、显示个人客户端机器的日期和时间

<script language="LiveScript">
<!-- Hiding
   today = new Date()
   ***("现 在 时 间 是: ",today.getHours(),":",today.getMinutes())
   ***("<br>今 天 日 期 为: ", today.getMonth()+1,"/",today.getDate(),"/",today.getYear());
// end hiding contents -->
</script>

46、自动的为你每次产生最後修改的日期了: 

<html>
<body>
This is a simple HTML- page.
<br>
Last changes:
   <script language="LiveScript">
   <!--   hide script from old browsers
     ***(document.lastModified)
   // end hiding contents -->
   </script>
</body>
</html>

47、不能为空和邮件地址的约束:

<html>
<head>
<script language="JavaScript">
<!-- Hide
function test1(form) {
   if (form.text1.value == "")
     alert("您 没 写 上 任 何 东 西, 请 再 输 入 一 次 !")
   else { 
    alert("嗨 "+form.text1.value+"! 您 已 输 入 完 成 !");
   }
}
function test2(form) {
   if (form.text2.value == "" || 
       form.text2.value.indexOf(‘@‘, 0) == -1) 
         alert("这 不 是 正 确 的 e-mail address! 请 再 输 入 一 次 !");
   else alert("您 已 输 入 完 成 !");
}
// -->
</script>
</head>
<body>
<form name="first">
Enter your name:<br>
<input type="text" name="text1">
<input type="button" name="button1" value="输 入 测 试" onClick="test1(this.form)">
<P>
Enter your e-mail address:<br>
<input type="text" name="text2">
<input type="button" name="button2" value="输 入 测 试" onClick="test2(this.form)">
</body>

48、跑马灯

<html>
<head>
<script language="JavaScript">
<!-- Hide
var scrtxt="怎麽样 ! 很酷吧 ! 您也可以试试."+"Here goes your message the visitors to your 
page will "+"look at for hours in pure fascination...";
var lentxt=scrtxt.length;
var width=100;
var pos=1-width;
function scroll() {
   pos++;
   var scroller="";
   if (pos==lentxt) {
     pos=1-width;
   }
   if (pos<0) {
     for (var i=1; i<=Math.abs(pos); i++) {
       scroller=scroller+" ";}
     scroller=scroller+scrtxt.substring(0,width-i+1);
   }
   else {
     scroller=scroller+scrtxt.substring(pos,width+pos);
   }
   window.status = scroller;
   setTimeout("scroll()",150);
   }
//-->
</script>
</head>
<body onLoad="scroll();return true;">
这里可显示您的网页 !
</body>
</html>

49、在网页中用按钮来控制前页,后页和主页的显示。

<html>
<body>
<FORM NAME="buttonbar">
      <INPUT TYPE="button" VALUE="Back" onClick="history.back()">
      <INPUT TYPE="button" VALUE="JS- Home" onClick="location=‘script.html‘">
      <INPUT TYPE="button" VALUE="Next" onCLick="history.forward()">
</FORM>
</body>
</html>

50、查看某网址的源代码

把如下代码加入<body>区域中

<SCRIPT>
function add()
{
    var ress=document.forms[0].luxiaoqing.value
    window.location="view-source:"+ress;
}
</SCRIPT>
输入要查看源代码的URL地址:
<FORM><input type="text" name="luxiaoqing" size=40 value="http://"></FORM>
<FORM><INPUT type="button" value="查看源代码" onClick=add()></FORM>

51、title显示日期

把如下代码加入<body>区域中:

<script language="JavaScript1.2">
<!--hide
    var isnMonth = new
    Array("1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月");
    var isnDay = new
    Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六","星期日");
    today = new Date () ;
    Year=today.getYear();
    Date=today.getDate();
    if (document.all)
    document.title="今天是: "+Year+"年"+isnMonth[today.getMonth()]+Date+"日"+isnDay[today.getDay()]
//--hide-->
</script>

52、显示所有链接

把如下代码加入<body>区域中

<script language="JavaScript1.2">
<!--
function extractlinks(){
    var links=document.all.tags("A")
    var total=links.length
    var win2=window.open("","","menubar,scrollbars,toolbar")
    win2.***("<font size=‘2‘>一共有"+total+"个连接</font><br>")
    for (i=0;i<total;i++){
        win2.***("<font size=‘2‘>"+links[i].outerHTML+"</font><br>")
    }
}
//-->
</script>
<input type="button" onClick="extractlinks()" value="显示所有的连接">

53、回车键换行

把如下代码加入<body>区域中

<script type="text/javascript">                
function handleEnter (field, event) {
   var keyCode = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;
   if (keyCode == 13) {
    var i;
    for (i = 0; i < field.form.elements.length; i++)
     if (field == field.form.elements[i])
      break;
    i = (i + 1) % field.form.elements.length;
    field.form.elements[i].focus();
    return false;
   } 
   else
   return true;
}      
</script>
<form>
<input type="text" onkeypress="return handleEnter(this, event)"><br>
<input type="text" onkeypress="return handleEnter(this, event)"><br>
<textarea>

54、确认后提交

把如下代码加入<body>区域中

<SCRIPT type="text/javascript">
<!--
    function msg(){
    if (confirm("你确认要提交嘛!"))
    document.lnman.submit()
    }
//-->
</SCRIPT>
<form name="lnman" method="post" action="">
   <p>
     <input type="text" name="textfield" value="确认后提交">
   </p>
   <p>
     <input type="button" name="Submit" value="提交" onclick="msg();">
   </p>
</form>

55、改变表格的内容

把如下代码加入<body>区域中

<script type="text/javascript">
    var arr=new Array()
    arr[0]="一一一一一";
    arr[1]="二二二二二";
    arr[2]="三三三三三";
</script>
<select onchange="zz.cells[this.selectedIndex].innerHTML=arr[this.selectedIndex]">
   <option value=a>改变第一格</option>
   <option value=a>改变第二格</option>
   <option value=a>改变第三格</option>
</select>
<table id=zz border=1>
   <tr height=20>
      <td width=150>第一格</td>
      <td width=150>第二格</td>
      <td width=150>第三格</td>
   </tr>
</table>

分享到:更多 ()

159

评论前必须登录!

 

  1. #1

    honey,how are you

    3566885年前 (2016-02-07)