|
動態JS程序二例(轉自yesky)
今天筆者要介紹的是基于JAVASCRIPT語言的二例動態程序(或者說JAVASCRIPT實現的二種動態效果)。說到網頁動態，有很多朋友不是很了解其含義，其實對于"網頁動態"的理解就筆者認為無非是鍵盤與網頁之間的對話，輸入框與網頁之間的對話，網頁與網頁之間對話等，本文主要介紹的是如何實現鍵盤與網頁之間的動態效果，至于其他幾方面以后有空再聊。(另注：由于JAVASCRIPT動態程序的性質所決定，本文所涉及的兩程序將結合網頁來講解。)
一．字母輸入程序(網頁源代碼中粗體字部分是JAVASCRIPT程序)
網頁源代碼：
＜html＞
＜head＞
＜title＞字母輸入程序＜/title＞
＜meta http-equiv="Content-Type" content="text/html; charset=gb2312"＞
＜/head＞
＜body bgcolor="#FFFFFF" onkeypress="presskeyboard()"＞
＜p align="center"＞＜font size="5" color="#0099FF"＞這是一個很酷的字母輸入程序，還不趕快抄下來！＜/font＞＜/p＞
＜p＞ ＜/p＞
＜p＞
＜input type="button" name="Button" value="看看輸入了哪些字母" onclick="onbutton()"＞
＜script language="Javascript"＞
var charremember="" //自定義程序字母變量charremember，變量類型為字符變量
function onbutton() //自定義程序運行的操作函數onbutton
{if (charremember=="") //設置條件語句，如果程序字母變量為空的話
{document.write("你沒有輸入字母，請重新輸入！") //那么網頁上顯示文字為"你沒有輸入字母，請重新輸入！"
return true
}
else {document.write(charremember) //否則把字母變量charremember中的值賦予運行操作函數，同時在網頁上顯示出來
}
}
＜/script＞
＜script language="Javascript"＞
function presskeyboard() //設置鍵盤運行操作對象函數
{
charremember=charremember+String.fromCharCode(window.event.keyCode) //鍵盤值賦予上面的字母變量，作為charremember的字符值
}
＜/script＞
＜/p＞
＜/body＞
＜/html＞
程序實現的動態效果：
這段程序所實現的是鍵盤與網頁之間對話的動態效果，簡單地說，就是用戶在瀏覽此網頁時只要在鍵盤上輸入若干字母或數字，然后再點擊網頁中"看看輸入了哪些字母"的按鈕，于是所有輸入的字母或數字便顯示在新網頁上了。聽上去難以理解，不要緊，COPY下來試試，馬上就會有感性認識了！
程序中的注意事項：
這段程序其實并不復雜，但有一點我希望各位網頁制作的愛好者能夠注意，那就是"＜body bgcolor="#FFFFFF" onkeypress="presskeyboard()"＞"中的onkeypress="presskeyboard()"這一句千萬不要亂改，否則動態效果將無法實現。另外，關于JAVASCRIPT程序的詳細解釋請看"//"后面的文字。
二．網頁快捷鍵程序(網頁源代碼中粗體字部分是JAVASCRIPT程序)
網頁源代碼：
＜html＞
＜head＞
＜title＞網頁快捷鍵程序＜/title＞
＜meta http-equiv="Content-Type" content="text/html; charset=gb2312"＞
＜/head＞
＜body bgcolor="#FFFFFF" onkeypress="onkeyboard()"＞
＜p align="left"＞
＜script language="Javascript"＞
function onkeyboard()//自定義運行函數
{
if(window.event.keyCode=0x65+0x66) //自定義鍵盤上的鍵值
{
window.open() //添加快捷鍵所需運行的操作函數，即實現怎樣的效果
}
}
＜/script＞
＜/p＞
＜p align="center"＞ ＜/p＞
＜p align="center"＞ ＜/p＞
＜p align="center"＞＜font size="5" color="#0000FF"＞按下A或B字母鍵。看看有什么反映！＜/font＞ ＜/p＞
＜/body＞
＜/html＞
程序實現的動態效果：
這段程序主要是實現了網頁快捷鍵的動態效果，即：在瀏覽網頁時，只要你按下A字母鍵或B字母鍵便立刻會激活window.open()運行函數，執行開啟新窗口命令(學過JAVASCRIPT語言的朋友都知道window.open()的作用，這里就不多講解了)。
網頁快捷鍵程序最大的優點就在于能夠隨心所欲地定義快捷鍵而不受系統的約束，另外快捷鍵所激活的程序也可以由編寫者自己把握，例如：在上文中"window.event.keyCode=0x65+0x66"定義了A字母鍵或B字母鍵，同樣也可以定義"0x67，0x68"C字母鍵或D字母鍵；又例如：在上文中快捷運行函數為window.open()，編寫者可以改成window.alert()(警示對話框)，window.close()(關閉窗口)，window.prompt()(輸入對話框)或自定義運行函數等等。
程序中的注意事項：
一．與字母輸入程序一樣，那就是"＜body bgcolor="#FFFFFF" onkeypress="onkeyboard()"＞"中的onkeypress="onkeyboard()"必須要正確無誤寫上，否則程序將無法正常運行。
二．"window.event.keyCode=0x65+0x66"中的0x65+0x66代表著字母鍵編號(上文已經提到過)。字母鍵必須用字母鍵編號表示，不能用字母表示，否則程序將不認此鍵。下面給出A～Z、0～9以及功能鍵的各鍵值編號：
鍵名 鍵編號 鍵名 鍵編號
A 0X65 U 0X85
B 0X66 V 0X86
C 0X67 W 0X87
D 0X68 X 0X88
E 0X69 Y 0X89
F 0X70 Z 0X90
G 0X71 0 0X48
H 0X72 1 0X49
I 0X73 2 0X50
J 0X74 3 0X51
K 0X75 4 0X52
L 0X76 5 0X53
M 0X77 6 0X54
N 0X78 7 0X55
O 0X79 8 0X56
P 0X80 9 0X57
Q 0X81 ESC 0X1B
R 0X82 CTRL 0X11
S 0X83 SHIFT 0X10
T 0X84 ENTER 0XD
雖然JAVASCRIPT被很多編程高手視為小孩子的把戲，但不能否認它所創造的網頁輝煌是絕對不亞于任何程序語言的。但愿這篇文章幫助各位實現網頁動態的夢想。
| 
