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 相关文章推荐
EXT窗口Window及对话框MessageBox
Jan 27 Javascript
ToolTips JQEURY插件之简洁小提示框效果
Nov 19 Javascript
js制作的鼠标悬浮时产生的下拉框效果
Oct 27 Javascript
jquery可见性过滤选择器使用示例
Jun 24 Javascript
js中indexof的用法详细解析
Dec 24 Javascript
jQuery实现仿百度帖吧头部固定导航效果
Aug 07 Javascript
基于javascript制作经典传统的拼图游戏
Mar 22 Javascript
JavaScript中 this 指向问题深度解析
Feb 21 Javascript
详解webpack异步加载业务模块
Jun 23 Javascript
vue后台管理之动态加载路由的方法
Aug 13 Javascript
深入了解query和params的使用区别
Jun 24 Javascript
基于JavaScript判断两个对象内容是否相等
Jan 10 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中判断文件存在是用file_exists还是is_file的整理
2012/09/12 PHP
PHP实现简单搜歌的方法
2015/07/28 PHP
yii2整合百度编辑器umeditor及umeditor图片上传问题的解决办法
2016/04/20 PHP
jquery插件之easing 动态菜单
2010/08/21 Javascript
javascript判断iphone/android手机横竖屏模式的函数
2011/12/20 Javascript
JS随机生成不重复数据的实例方法
2013/07/17 Javascript
Jquery实现图片放大镜效果的思路及代码(自写)
2013/10/18 Javascript
Eclipse配置Javascript开发环境图文教程
2015/01/29 Javascript
JavaScript jquery及AJAX小结
2016/01/24 Javascript
AngularJS自定义服务与fliter的混合使用
2016/11/24 Javascript
jQuery实现大图轮播
2017/02/13 Javascript
详解如何在angular2中获取节点
2017/11/23 Javascript
推荐15个最好用的JavaScript代码压缩工具
2019/02/13 Javascript
js+html实现点名系统功能
2019/11/05 Javascript
JS实现简易留言板(节点操作)
2020/03/16 Javascript
[42:32]DOTA2上海特级锦标赛B组资格赛#2 Fnatic VS Spirit第二局
2016/02/27 DOTA
Python描述器descriptor详解
2015/02/03 Python
Python检测网络延迟的代码
2018/05/15 Python
python操作redis方法总结
2018/06/06 Python
Python get获取页面cookie代码实例
2018/09/12 Python
使用python批量修改文件名的方法(视频合并时)
2020/03/24 Python
python2.7的flask框架之引用js&amp;css等静态文件的实现方法
2019/08/22 Python
详解Python中的format格式化函数的使用方法
2019/11/20 Python
安装PyInstaller失败问题解决
2019/12/14 Python
详解Python3.8+PyQt5+pyqt5-tools+Pycharm配置详细教程
2020/11/02 Python
英国健身专家:WIT Fitness
2021/02/09 全球购物
大学生军训感想
2014/02/16 职场文书
演讲主持词
2014/03/18 职场文书
小学五年级学生评语
2014/04/22 职场文书
班长竞选演讲稿
2014/04/24 职场文书
危货运输企业安全生产责任书
2014/07/28 职场文书
财政局党的群众路线教育实践活动整改方案
2014/09/21 职场文书
县政协领导班子群众路线教育实践活动四风问题整改方案
2014/10/26 职场文书
2015年感恩母亲节活动方案
2015/05/04 职场文书
九年级数学教学反思
2016/02/17 职场文书
mysql序号rownum行号实现方式
2022/12/24 MySQL