动态基本教程第六节: 键盘控制 | |
我们已经学到了
这一节我们将告诉你如何运用键盘来控制这些运动方. 请你记住 Capturing Keystrokes
相应敲击键是电脑和人的基本相互作用。你可以控制任何一个键的按下和松开。 document.onkeydown = keyDown
这里的 keyDown 是你所要编写的相应键盘的子程序。当你的浏览器读了以上的 NetscapeNetscape 在处理取得哪个键被敲击的时候比较烦琐点儿。 document.onkeydown = keyDown if (ns4) document.captureEvents(Event.KEYDOWN)
你的 keyDown() 子程序必须传递一个隐藏的变量, 我们这里把这比变量叫 "e", function keyDown(e)
这个 "e" 表示那个被按的键。 想要知道哪个键被按了, 你需要用 e 的 which e.which 这只能告诉你这个键的内部码. 所以你还要用字串处理程序把它转成数字或字母. String.fromCharCode(e.which) 综上所述, 我们写一个 keyDown() 子程序, 它打开一个窗口告诉哪个键被按了. function keyDown(e) { var keycode = e.which var realkey = String.fromCharCode(e.which) alert("keycode: " + keycode + "\nrealkey: " + realkey) } document.onkeydown = keyDown ocument.captureEvents(Event.KEYDOWN) Internet Explorer
IE 的语句比较简单一些. 但它不是用 e.which而是用 window.event.keyCode function keyDown() { var keycode = event.keyCode var realkey = String.fromCharCode(event.keyCode) alert("keycode: " + keycode + "\nrealkey: " + realkey) } document.onkeydown = keyDown 兼容两者
你如果在你的机器上试验了上述两种浏览器, 你会发现所显示的 realykey 值不见
下面的语句对次做出如下的调整. 如果用的是 Netscaep, 变量 nKey 将会得到 key function keyDown(e) { if (ns4) {var nKey=e.which; var ieKey=0} if (ie4) {var ieKey=event.keyCode; var nKey=0} alert("nKey:"+nKey+" ieKey:" + ieKey); } document.onkeydown = keyDown if (ns4) document.captureEvents(Event.KEYDOWN) 下面我们就讨论如何运用 用键盘移动元素
假如你想用键盘来启动你的滑动, 你需要先知道哪个键被按了, 然后用相应的子程序 function init() { if (ns4) block = document.blockDiv if (ie4) block = blockDiv.style block.xpos = parseInt(block.left) document.onkeydown = keyDown if (ns4) document.captureEvents(Event.KEYDOWN) } function keyDown(e) { if (ns4) {var nKey=e.which; var ieKey=0} if (ie4) {var ieKey=event.keyCode; var nKey=0} if (nKey==97 || ieKey==65) { // if "A" key is pressed slide() } } function slide() { if (block.xpos <300) { block.xpos +="5" block.left="block.xpos" status="block.xpos" // not needed, just for show setTimeout("slide()",30) } } 启动变量
毫无疑问, 你注意到在上一个范例中, 一但滑动就停不下来了直到终点. 我们 function slide() { if (myobj.active) { myobj.xpos += 5 myojb.left = myobj.xpos setTimeout("slide()",30) } }
上面这个滑动子程序只有当变量 myobj.active 等于 true 的时候才继续要不 使用 onKeyUp 和启动变量来控制滑动onkeyup 就是 onkeydown 相反, 也就是说它用来对键起来这个事件做出反应的. document.onkeydown = keyDown document.onkeyup = keyUp if (ns4) document.captureEvents(Event.KEYDOWN | Event.KEYUP)
keyUp() 子程序当然也是由你来写的. 在这里, 我们想让它在被按下的键松开的时候 function keyUp(e) { if (ns4) var nKey = e.which if (ie4) var ieKey = window.event.keyCode if (nKey==97 || ieKey==65) block.active = false }
下面就是一个完整的程序. 不知道你是否看懂的它. 在 keyDown 子程序里, 用了变量 function init() { if (ns4) block = document.blockDiv if (ie4) block = blockDiv.style block.xpos = parseInt(block.left) block.active = false document.onkeydown = keyDown document.onkeyup = keyUp if (ns4) document.captureEvents(Event.KEYDOWN | Event.KEYUP) } function keyDown(e) { if (ns4) {var nKey=e.which; var ieKey=0} if (ie4) {var ieKey=event.keyCode; var nKey=0} if ((nKey==97 || ieKey==65) && !block.active) { // if "A" key is pressed block.active = true slide() } } function keyUp(e) { if (ns4) {var nKey=e.which; var ieKey=0} if (ie4) {var ieKey=event.keyCode; var nKey=0} if (nKey==97 || ieKey==65) { block.active = false // if "A" key is released } } function slide() { if (block.active) { block.xpos += 5 block.left = block.xpos status = block.xpos // not needed, just for show setTimeout("slide()",30) } } 我们可以用那些键呢?
我们前面曾说过, 两个浏览器用的不东的字码集. 各有各的特点. 比如 Netscape 可以 |
|
|