JavaScript最經典的55個技巧(41-55)

41、email地址的分割 
把如下代碼加入 <body>區域中 
<a href="mailto:[email protected]">[email protected] </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> <br> 
<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.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) 
break; 
i = (i + 1) % field.form.elements.length; 
field.form.elements.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 LANGUAGE="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 ***script> 
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>


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章