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初学困境—js初学
Dec 29 Javascript
JQuery动态给table添加、删除行 改进版
Jan 19 Javascript
Ajax 数据请求的简单分析
Apr 05 Javascript
jQuery判断checkbox(复选框)是否被选中以及全选、反选实现代码
Feb 21 Javascript
jquery插件推荐浏览器嗅探userAgent
Nov 09 Javascript
jQuery中slice()方法用法实例
Jan 07 Javascript
swtich/if...else的替代语句
Aug 16 Javascript
基于javascript实现仿百度输入框自动匹配功能
Jan 03 Javascript
Javascript之面向对象--接口
Dec 02 Javascript
SpringMVC+bootstrap table实例详解
Jun 02 Javascript
node使用Koa2搭建web项目的方法
Oct 17 Javascript
解决vue无法设置滚动位置的问题
Oct 07 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语言中global和$GLOBALS[]的分析 之二
2012/02/02 PHP
利用phpExcel实现Excel数据的导入导出(全步骤详细解析)
2013/11/26 PHP
PHP中把对象数组转换成普通数组的方法
2015/07/10 PHP
PHP添加图片水印、压缩、剪切的封装类
2015/08/17 PHP
php判断文件上传图片格式的实例详解
2017/09/30 PHP
根据判断浏览器类型屏幕分辨率自动调用不同CSS的代码
2007/02/22 Javascript
TBCompressor js代码压缩
2011/01/05 Javascript
JQuyer $.post 与 $.ajax 访问WCF ajax service 时的问题需要注意的地方
2011/09/20 Javascript
jQuery实现带有洗牌效果的动画分页实例
2015/08/31 Javascript
针对BootStrap中tabs控件的美化和完善(推荐)
2016/07/06 Javascript
一次$.getJSON不执行的简单记录
2016/07/19 Javascript
基于原生js淡入淡出函数封装(兼容IE)
2016/10/20 Javascript
javascript轮播图算法
2016/10/21 Javascript
webpack配置sass模块的加载的方法
2017/07/30 Javascript
nodejs中art-template模板语法的引入及冲突解决方案
2017/11/07 NodeJs
Linux Centos7.2下安装nodejs&amp;npm配置全局路径的教程
2018/05/15 NodeJs
Vue前后端不同端口的实现方法
2018/09/19 Javascript
Web安全之XSS攻击与防御小结
2018/12/13 Javascript
基于Vue SEO的四种方案(小结)
2019/07/01 Javascript
layui 实现二级弹窗弹出之后 关闭一级弹窗的方法
2019/09/18 Javascript
JS实现压缩上传图片base64长度功能
2019/12/03 Javascript
JS通用方法触发点击事件代码实例
2020/02/17 Javascript
用PyQt进行Python图形界面的程序的开发的入门指引
2015/04/14 Python
浅谈Python中数据解析
2015/05/05 Python
Django卸载之后重新安装的方法
2017/03/15 Python
Python常用的json标准库
2019/02/19 Python
Python内存管理实例分析
2019/07/10 Python
Python matplotlib读取excel数据并用for循环画多个子图subplot操作
2020/07/14 Python
html5 canvas移动浏览器上实现图片压缩上传
2016/03/11 HTML / CSS
如何整合JQuery和Prototype
2014/01/31 面试题
校园安全标语
2014/06/07 职场文书
组织生活会发言材料
2014/12/15 职场文书
冰峪沟导游词
2015/02/09 职场文书
大学校园招聘会感想
2015/08/10 职场文书
2019军训心得体会
2019/06/27 职场文书
tomcat正常启动但网页却无法访问的几种解决方法
2022/05/06 Servers