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[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 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>