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 相关文章推荐
innerhtml用法 innertext用法 以及innerHTML与innertext的区别
Oct 26 Javascript
JavaScript中的eval()函数详解
Aug 22 Javascript
jquery快捷动态绑定键盘事件的操作函数代码
Oct 17 Javascript
jQuery实现tab选项卡效果的方法
Jul 08 Javascript
Javascript removeChild()删除节点及删除子节点的方法
Dec 27 Javascript
深入解析jQuery中Deferred的deferred.promise()方法
May 03 Javascript
jQuery实现下拉框功能实例代码
May 06 Javascript
js数组去重的hash方法
Dec 22 Javascript
全面解析jQuery中的$(window)与$(document)的用法区别
Aug 15 jQuery
浅谈Angular2 ng-content 指令在组件中嵌入内容
Aug 18 Javascript
vue2利用Bus.js如何实现非父子组件通信详解
Aug 25 Javascript
微信小程序(订阅消息)功能
Oct 25 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
Look And Say 序列php实现代码
2011/05/22 PHP
PHP针对常规模板引擎中与CSS/JSON冲突的解决方法
2014/08/19 PHP
jquery attr 设定src中含有&amp;(宏)符号问题的解决方法
2011/07/26 Javascript
JavaScript 学习笔记之一jQuery写法图片等比缩放以及预加载
2012/06/28 Javascript
js相册效果代码(点击创建即可)
2013/04/16 Javascript
JS获得浏览器版本和操作系统版本的例子
2014/05/13 Javascript
jQuery实现的点赞随机数字显示动画效果(附在线演示与demo源码下载)
2015/12/31 Javascript
AngularJS入门教程之Select(选择框)详解
2016/07/27 Javascript
jQuery表单对象属性过滤选择器实例详解
2016/09/13 Javascript
jQuery图片加载显示loading效果
2016/11/04 Javascript
微信小程序 时间格式化(util.formatTime(new Date))详解
2016/11/16 Javascript
Vue学习笔记进阶篇之单元素过度
2017/07/19 Javascript
jquery实现倒计时小应用
2017/09/19 jQuery
深入理解Angular4订阅(Subscribe)与取消
2017/11/22 Javascript
Vue shopCart 组件开发详解
2018/01/26 Javascript
使用vue如何构建一个自动建站项目
2018/02/05 Javascript
Bootstrap实现的表格合并单元格示例
2018/02/06 Javascript
jqGrid表格底部汇总、合计行footerrow处理
2019/08/21 Javascript
jQuery - AJAX load() 实例用法详解
2019/08/27 jQuery
JS实现吸顶特效
2020/01/08 Javascript
[02:31]2014DOTA2国际邀请赛2009专访:干爹表现出乎意料 看好DK杀回决赛
2014/07/20 DOTA
python排序函数sort()与sorted()的区别
2018/09/18 Python
python交易记录链的实现过程详解
2019/07/03 Python
Python (Win)readline和tab补全的安装方法
2019/08/27 Python
python提取xml里面的链接源码详解
2019/10/15 Python
Python字典中的值为列表或字典的构造实例
2019/12/16 Python
Python序列类型的打包和解包实例
2019/12/21 Python
OpenCV4.1.0+VS2017环境配置的方法步骤
2020/07/09 Python
Python尾递归优化实现代码及原理详解
2020/10/09 Python
机械化及自动化毕业生的自我评价分享
2013/11/06 职场文书
医学生职业规划范文
2014/01/05 职场文书
财务总监岗位职责
2014/03/07 职场文书
师德师风演讲稿
2014/05/05 职场文书
职业规划实施方案
2014/06/10 职场文书
幼儿教师自我剖析材料
2014/09/29 职场文书
人事局接收函
2015/01/30 职场文书