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 相关文章推荐
符合标准的js表单提交的代码
Sep 13 Javascript
jQuery关于导航条背景切换效果实现示例
Sep 04 Javascript
AngularJS创建自定义指令的方法详解
Nov 03 Javascript
微信小程序 配置顶部导航条标题颜色的实现方法
Sep 20 Javascript
vue项目中使用lib-flexible解决移动端适配的问题解决
Aug 23 Javascript
Mint UI组件库CheckList使用及踩坑总结
Dec 20 Javascript
JS实现指定区域的全屏显示功能示例
Apr 25 Javascript
VUE单页面切换动画代码(全网最好的切换效果)
Oct 31 Javascript
javascript实现简单搜索功能
Mar 26 Javascript
vue单应用在ios系统中实现微信分享功能操作
Sep 07 Javascript
vue实现可拖拽的dialog弹框
May 13 Vue.js
node.js如何自定义实现一个EventEmitter
Jul 16 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
40年前的这部特摄片恐龙特级克塞号80后的共同回忆
2020/03/08 日漫
简单的页面缓冲技术
2006/10/09 PHP
php实现的百度搜索某地天气的小偷代码
2014/04/23 PHP
javascript event 事件解析
2011/01/31 Javascript
JavaScript异步调用定时方法并停止该方法实现代码
2012/03/16 Javascript
js实现的奥运倒计时时钟效果代码
2015/12/09 Javascript
基于JS实现移动端访问PC端页面时跳转到对应的移动端网页
2020/12/24 Javascript
详解jQuery插件开发方式
2016/11/22 Javascript
Node.js使用NodeMailer发送邮件实例代码
2017/03/06 Javascript
js实现可以点击收缩或张开的悬浮窗
2017/09/18 Javascript
[03:01]完美盛典趣味短片 DOTA2年度最佳&拉胯英雄
2019/12/07 DOTA
Python文件与文件夹常见基本操作总结
2016/09/19 Python
python2.7+selenium2实现淘宝滑块自动认证功能
2018/02/24 Python
为什么入门大数据选择Python而不是Java?
2018/03/07 Python
python分块读取大数据,避免内存不足的方法
2018/12/10 Python
Python实现Singleton模式的方式详解
2019/08/08 Python
将pymysql获取到的数据类型是tuple转化为pandas方式
2020/05/15 Python
Python装饰器如何实现修复过程解析
2020/09/05 Python
python 日志模块logging的使用场景及示例
2021/01/04 Python
CSS3过渡transition效果实例介绍
2016/05/03 HTML / CSS
HTML5拖拉上传文件的简单实例
2017/01/11 HTML / CSS
什么是Oracle的后台进程background processes?都有哪些后台进程?
2012/04/26 面试题
公司活动策划方案
2014/01/13 职场文书
哈弗商学院毕业生求职信
2014/02/26 职场文书
电子专业毕业生自荐信
2014/05/25 职场文书
公司副总经理任命书
2014/06/05 职场文书
企业文化标语口号
2014/06/09 职场文书
亚运会口号
2014/06/20 职场文书
先进工作者申报材料
2014/12/23 职场文书
单位接收函格式
2015/01/30 职场文书
终止解除劳动合同证明书
2015/06/17 职场文书
追悼会悼词大全
2015/06/23 职场文书
2015年重阳节主持词
2015/07/04 职场文书
2019年教师节活动策划方案
2019/09/09 职场文书
将图片保存到mysql数据库并展示在前端页面的实现代码
2021/05/02 MySQL
Python如何导出导入所有依赖包详解
2021/06/08 Python