js键盘上下左右键怎么触发function(实例讲解)


Posted in Javascript onDecember 14, 2013
<script type="text/javascript">
 function jumpPage() { 
    if (event.keyCode==37)//左 
fun_a(); 
if (event.keyCode==38)//上
 fun_b();
 if (event.keyCode==39)//右 
fun_c(); 
if (event.keyCode==40)//下 
fun_d();
 } 

 
function fun_a(){ 
window.alert('你按下了左')
 } 
function fun_b(){ 
window.alert('你按下了上')
} 
function fun_c(){ 
window.alert('你按下了右') 
} 
function fun_d(){
 window.alert('你按下了下') 
} 
document.onkeydown=jumpPage;
</script>

HTML code
<table width="100%" border="1" cellspacing="1" cellpadding="0" id=table> <tr id="lineone" style="background-color:#00cccc;"> <td id=aa height="23"> </td> <td id=aa >按向下键</td> <td id=cc >按向下键</td> <td id=dd >按向下键</td> <td id=ee >按向下键</td> </tr> <tr id="linetwo" tyle="background-color:#ffffff;"> <td id=a height="23"> </td> <td id=b >按向上键</td> <td id=c >按向上键</td> <td id=d >按向上键</td> <td id=e >按向上键</td> </tr></table><script language="javascript"> function keyDown(e) { var iekey=event.keyCode; action(iekey); } document.onkeydown = keyDown; function action(iekey) { if(iekey==40) { lineone.style.backgroundColor = ""; linetwo.style.backgroundColor = "#00cccc"; } if(iekey==38) { lineone.style.backgroundColor = "#00cccc"; linetwo.style.backgroundColor = ""; } } </script><input name="id" type="hidden" id="id" value
Javascript 相关文章推荐
JavaScript 高级语法介绍
Jun 15 Javascript
JQuery获取浏览器窗口内容部分高度的代码
Feb 24 Javascript
javascript上下方向键控制表格行选中并高亮显示的方法
Feb 13 Javascript
jquery自定义表格样式
Nov 23 Javascript
jQuery移除或禁用html元素点击事件常用方法小结
Feb 10 Javascript
webpack学习--webpack经典7分钟入门教程
Jun 28 Javascript
对Vue.js之事件的绑定(v-on: 或者 @ )详解
Sep 15 Javascript
小试SVG之新手小白入门教程
Jan 08 Javascript
浅谈javascript中的prototype和__proto__的理解
Apr 07 Javascript
node.js使用mongoose操作数据库实现购物车的增、删、改、查功能示例
Dec 23 Javascript
微信小程序基于movable-view实现滑动删除效果
Jan 08 Javascript
微信小程序scroll-view实现滚动到锚点左侧导航栏点餐功能(点击种类,滚动到锚点)
Jun 11 Javascript
js 上下左右键控制焦点(示例代码)
Dec 14 #Javascript
利用JS来控制键盘的上下左右键(示例代码)
Dec 14 #Javascript
JS短路原理的应用示例 精简代码的途径
Dec 13 #Javascript
代码触发js事件(click、change)示例应用
Dec 13 #Javascript
jquery获得option的值和对option进行操作
Dec 13 #Javascript
jquery遍历筛选数组的几种方法和遍历解析json对象
Dec 13 #Javascript
jquery改变disabled的boolean状态的三种方法
Dec 13 #Javascript
You might like
php中判断一个字符串包含另一个字符串的方法
2007/03/19 PHP
PHP时间戳 strtotime()使用方法和技巧
2013/10/29 PHP
PHP SPL标准库之数据结构栈(SplStack)介绍
2015/05/12 PHP
非常不错的一个javascript 类
2006/11/07 Javascript
javaScript checkbox 全选/反选及批量删除
2010/04/28 Javascript
JavaScript使用HTML5的window.postMessage实现跨域通信例子
2014/04/11 Javascript
使用jquery获取url及url参数的简单实例
2016/06/14 Javascript
基于JS代码实现图片在页面中旋转效果
2016/06/16 Javascript
基于bootstrap实现收缩导航条
2017/03/17 Javascript
JavaScript调试之console.log调试的一个小技巧分享
2017/08/07 Javascript
JavaScript模板引擎实现原理实例详解
2018/12/14 Javascript
小程序最新获取用户昵称和头像的方法总结
2019/09/23 Javascript
layui prompt 设置允许空白提交的方法
2019/09/24 Javascript
微信小程序scroll-view锚点链接滚动跳转功能
2019/12/12 Javascript
[01:03:51]2018DOTA2亚洲邀请赛 4.7 淘汰赛 VP vs LGD 第三场
2018/04/09 DOTA
对Python进行数据分析_关于Package的安装问题
2017/05/22 Python
老生常谈python函数参数的区别(必看篇)
2017/05/29 Python
python构建深度神经网络(续)
2018/03/10 Python
Python之两种模式的生产者消费者模型详解
2018/10/26 Python
对python dataframe逻辑取值的方法详解
2019/01/30 Python
如何用Python破解wifi密码过程详解
2019/07/12 Python
python中从for循环延申到推导式的具体使用
2019/11/29 Python
Python定义一个函数的方法
2020/06/15 Python
利用pipenv和pyenv管理多个相互独立的Python虚拟开发环境
2020/11/01 Python
通过css3动画和opacity透明度实现呼吸灯效果
2019/08/09 HTML / CSS
几道PHP面试题
2013/04/14 面试题
比较基础的php面试题及答案-填空题
2014/04/26 面试题
董事长秘书岗位职责
2013/11/29 职场文书
农民工创业典型事迹
2014/01/25 职场文书
教师个人鉴定材料
2014/02/08 职场文书
《蒙娜丽莎之约》教学反思
2014/02/27 职场文书
5s标语大全
2014/06/23 职场文书
《实心球》教学反思
2016/02/23 职场文书
详细介绍Java中的CyclicBarrier
2022/04/13 Java/Android
CSS实现鼠标悬浮动画特效
2023/05/07 HTML / CSS
CSS中calc(100%-100px)不加空格不生效
2023/05/07 HTML / CSS