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实现二分查找法实现代码
Nov 12 Javascript
不懂JavaScript应该怎样学
Apr 16 Javascript
js 静态动态成员 and 信息的封装和隐藏
May 29 Javascript
jQuery数组处理代码详解(含实例演示)
Feb 03 Javascript
js+ajax实现获取文件大小的方法
Dec 08 Javascript
Bootstrap Navbar Component实现响应式导航
Oct 08 Javascript
使用Angular CLI进行单元测试和E2E测试的方法
Mar 24 Javascript
jQuery实现列表的增加和删除功能
Jun 14 jQuery
详解webpack4.x之搭建前端开发环境
Mar 28 Javascript
vue实现的封装全局filter并统一管理操作示例
Feb 02 Javascript
vue 实现根据data中的属性值来设置不同的样式
Aug 04 Javascript
如何在vue中使用kindeditor富文本编辑器
Dec 19 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
模拟flock实现文件锁定
2007/02/14 PHP
php获取指定数量随机字符串的方法
2017/02/06 PHP
PHP实践教程之过滤、验证、转义与密码详解
2017/07/24 PHP
php微信公众号开发之关键词回复
2018/10/20 PHP
laravel5.5安装jwt-auth 生成token令牌的示例
2019/10/24 PHP
javascript 正则替换 replace(regExp, function)用法
2010/05/22 Javascript
jQuery.get、jQuery.getJSON、jQuery.post无法返回JSON问题的解决方法
2011/07/28 Javascript
javascript history对象(历史记录)使用方法(实现浏览器前进后退)
2014/01/07 Javascript
浅谈jQuery异步对象(XMLHttpRequest)
2014/11/17 Javascript
jQuery+CSS3实现3D立方体旋转效果
2015/11/10 Javascript
基于JavaScript实现轮播图原理及示例
2020/04/10 Javascript
微信小程序本作用域下调用全局JS详解及实例
2017/02/22 Javascript
jQuery快速高效制作网页交互特效
2017/02/24 Javascript
完美实现js选项卡切换效果(一)
2017/03/08 Javascript
jQuery实现表格奇偶行显示不同背景色 就这么简单
2017/03/13 Javascript
vue中的scope使用详解
2017/10/29 Javascript
vue组件实现可搜索下拉框扩展
2020/10/23 Javascript
vue中使用百度脑图kityminder-core二次开发的实现
2019/09/26 Javascript
Vue 列表页带参数进详情页的操作(router-link)
2020/11/13 Javascript
浅谈Vue使用Elementui修改默认的最快方法
2020/12/05 Vue.js
Python实现的检测网站挂马程序
2014/11/30 Python
django实现前后台交互实例
2017/08/07 Python
Python之多线程爬虫抓取网页图片的示例代码
2018/01/10 Python
Django Python 获取请求头信息Content-Range的方法
2019/08/06 Python
python 定义类时,实现内部方法的互相调用
2019/12/25 Python
Python包和模块的分发详细介绍
2020/06/19 Python
python Scrapy爬虫框架的使用
2021/01/21 Python
兰蔻美国官网:Lancome美国
2017/04/25 全球购物
澳大利亚汽车零部件、音响及配件超市:Automotive Superstore
2018/06/19 全球购物
屈臣氏俄罗斯在线商店:Watsons俄罗斯
2020/08/03 全球购物
科技之星事迹材料
2014/06/02 职场文书
销售助理岗位职责
2015/02/11 职场文书
2015年学校信息技术工作总结
2015/05/25 职场文书
2015年小学总务工作总结
2015/07/21 职场文书
《所见》教学反思
2016/02/23 职场文书
PostgreSQL数据库创建并使用视图以及子查询
2022/04/11 PostgreSQL