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 相关文章推荐
Mootools 1.2教程 正则表达式
Sep 15 Javascript
JavaScript对象、属性、事件手册集合方便查询
Jul 04 Javascript
JavaScript 通过模式匹配实现重载
Aug 12 Javascript
js的image onload事件使用遇到的问题
Jul 15 Javascript
在JavaScript中重写jQuery对象的方法实例教程
Aug 25 Javascript
vue.js初学入门教程(1)
Nov 03 Javascript
微信小程序使用Socket的实例
Sep 19 Javascript
详解Nuxt.js部署及踩过的坑
Aug 07 Javascript
浅析vue 函数配置项watch及函数 $watch 源码分享
Nov 22 Javascript
Node.js开发之套接字(socket)编程入门示例
Nov 05 Javascript
小程序实现密码输入框
Nov 16 Javascript
vue里使用create, mounted调用方法
Apr 26 Vue.js
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
为查询结果建立向后/向前按钮
2006/10/09 PHP
ThinkPHP中自定义目录结构的设置方法
2014/08/15 PHP
PHP框架Swoole定时器Timer特性分析
2014/08/19 PHP
php读取csv数据保存到数组的方法
2015/01/03 PHP
php-fpm开启状态统计的方法详解
2017/06/23 PHP
PHP 超级全局变量相关总结
2020/06/30 PHP
js压缩利器
2007/02/20 Javascript
jQuery选择没有colspan属性的td的代码
2010/07/06 Javascript
动态加载外部javascript文件的函数代码分享
2011/07/28 Javascript
Prototype源码浅析 String部分(四)之补充
2012/01/16 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(二)人物行走的实现
2013/01/23 Javascript
jQuery实现简单的点赞效果
2020/05/29 Javascript
Three.js学习之正交投影照相机
2016/08/01 Javascript
AngularJS基础 ng-init 指令简单示例
2016/08/02 Javascript
使用nodejs中httpProxy代理时候出现404异常的解决方法
2016/08/15 NodeJs
AngularJS前端页面操作之用户修改密码功能示例
2017/03/27 Javascript
自适应布局meta标签中viewport、content、width、initial-scale、minimum-scale、maximum-scale总结
2017/08/18 Javascript
微信小程序使用image组件显示图片的方法【附源码下载】
2017/12/08 Javascript
javascript中this的用法实践分析
2019/07/29 Javascript
JavaScript中展开运算符及应用的实例代码
2021/01/14 Javascript
[03:12]完美世界DOTA2联赛PWL DAY7集锦
2020/11/06 DOTA
python之django母板页面的使用
2018/07/03 Python
pyqt 实现QlineEdit 输入密码显示成圆点的方法
2019/06/24 Python
Django使用中间键实现csrf认证详解
2019/07/22 Python
AmazeUI 点击元素显示全屏的实现
2020/08/25 HTML / CSS
骆驼官方商城:CAMEL
2016/11/22 全球购物
园林设计师自荐信
2013/11/18 职场文书
医学专业毕业生个人求职信
2013/12/25 职场文书
大学生水果店创业计划书
2014/01/28 职场文书
优秀信贷员先进事迹
2014/01/31 职场文书
教师个人年度总结
2015/02/11 职场文书
2015年收银工作总结范文
2015/04/01 职场文书
2015中学学校工作总结
2015/07/20 职场文书
2019年度行政文员工作计划范本!
2019/07/04 职场文书
导游词之无锡梅园
2019/11/28 职场文书
PostgreSQL常用字符串分割函数整理汇总
2022/07/07 PostgreSQL