Javascript中最常用的55个经典技巧(3)

41、email地址的分割
把如下代码加入 <body>区域中
<ahref="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=0height="+((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=10id=a_mo"+(Nx-1)+"> </td> <tdcolspan="+(Ny-2)+" rowspan="+(Nx)+"> </td> <td width=16id=a_mo"+(Nx+Ny)+"></td></tr>"
for(x=2;x <=Nx;x++)
t+=" <tr> <td width=16id=a_mo"+(Nx-x)+"> </td> <td width=16id=a_mo"+(Ny+Nx+x-1)+"> </td></tr>"
t+=" <tr>"
for(x=Ny;x>0;x--)
t+=" <td width=16id=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) ;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"οnclick="WinOpen()">
</form>
</body>
</html>
==============
一、在下面的代码中,你只要单击打开一个窗口,即可链接到赛迪网。而当你想关闭时,只要单击一下即可关闭刚才打开的窗口。
  代码如下:
   <SCRIPTlanguage="JavaScript">
   <!--
  function openclk() {
  another=open('1000){this.resized=true;this.style.width=1000;}"align=absMiddleborder=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)">
  三、讨厌很多网站总是按照默认窗口打开,如果你能随心所欲控制打开的窗口那该多好。
  代码如下:
   <SCRIPTLANGUAGE="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=2maxlength=4> pixels
  离开右边的距离: <input type=text name=top size=2maxlength=4> pixels
  窗口的宽度: <input type=text name=width size=2maxlength=4> pixels
  窗口的高度: <input type=text name=height size=2maxlength=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:
  <scriptlanguage="LiveScript">
  <!--  hidescript 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 thevisitors 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();returntrue;">
这里可显示您的网页 !
</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> <inputtype="text" name="luxiaoqing" size=40value="http://"></FORM>
<FORM><br>
<INPUT type="button" value="查看源代码"onClick=add()>
</FORM>


51、title显示日期
把如下代码加入 <body>区域中:
<scriptlanguage="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>区域中
<scriptlanguage="JavaScript1.2">
<!--
function extractlinks(){
var links=document.all.tags("A")
var total=links.length
var win2=window.open("","","menubar,scrollbars,toolbar")
win2.***(" <fontsize='2'>一共有"+total+"个连接</font><br>")
for (i=0;i <total;i++){
win2.***(" <fontsize='2'>"+links[i].outerHTML+"</font><br>")
}
}
//-->
</script>
<input type="button" onClick="extractlinks()"value="显示所有的连接">


53、回车键换行
把如下代码加入 <body>区域中
<scripttype="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" οnkeypress="returnhandleEnter(this, event)"><br>
<input type="text" οnkeypress="returnhandleEnter(this, event)"><br>
<textarea>回车换行


54、确认后提交
把如下代码加入 <body>区域中
<SCRIPT LANGUAGE="JavaScript">
<!--
function msg(){
if (confirm("你确认要提交嘛!"))
document.lnman.submit()
}
//-->
</SCRIPT>
<form name="lnman" method="post"action="">
  <p>
    <inputtype="text" name="textfield" value="确认后提交">
  </p>
  <p>
    <inputtype="button" name="Submit" value="提交"οnclick="msg();">
  </p>
</form>


55、改变表格的内容
把如下代码加入 <body>区域中
<script ***script>
var arr=new Array()
arr[0]="一一一一一";
arr[1]="二二二二二";
arr[2]="三三三三三";
</script>
<selectοnchange="zz.cells[this.selectedIndex].innerHTML=arr[this.selectedIndex]">
  <optionvalue=a>改变第一格</option>
  <optionvalue=a>改变第二格</option>
  <optionvalue=a>改变第三格</option>
</select>
<table id=zz border=1>
  <trheight=20>
    <tdwidth=150>第一格</td>
<td width=150>第二格</td>
<td width=150>第三格</td>
  </tr>
</table>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值