广告：
网页制作参考
千千学园
雨路开发频道
雨路技术文档
技术问答
编程技术

作者： unknow

                  动态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被很多编程高手视为小孩子的把戏，但不能否认它所创造的网页辉煌是绝对不亚于任何程序语言的。但愿这篇文章帮助各位实现网页动态的梦想。