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在IE和Firefox浏览器下的7个差异兼容写法小结
Jun 18 Javascript
JS 进度条效果实现代码整理
May 21 Javascript
js实现网站首页图片滚动显示
Feb 04 Javascript
JavaScript常用脚本汇总(一)
Mar 04 Javascript
在JavaScript的jQuery库中操作AJAX的方法讲解
Aug 15 Javascript
Web程序员必备的7个JavaScript函数
Jun 14 Javascript
ajax实现动态下拉框示例
Jan 10 Javascript
使用angular帮你实现拖拽的示例
Jul 05 Javascript
Vue中用props给data赋初始值遇到的问题解决
Nov 27 Javascript
微信小程序实现搜索指定景点周边美食、酒店
May 18 Javascript
移动端底部导航固定配合vue-router实现组件切换功能
Jun 13 Javascript
基于jQuery的时间戳与日期间的转化
Jun 21 jQuery
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
全国FM电台频率大全 - 1 北京市
2020/03/11 无线电
PHP的几个常用数字判断函数代码
2012/04/24 PHP
php实现文件编码批量转换
2014/03/10 PHP
php计算两个坐标(经度,纬度)之间距离的方法
2015/04/17 PHP
php简单判断文本编码的方法
2015/07/30 PHP
PHP下载文件函数与用法示例
2019/09/27 PHP
15款优秀的jQuery导航菜单插件分享
2011/07/19 Javascript
ajax不执行success回调而是执行了error回调
2012/12/10 Javascript
jquery选择器的选择使用及性能介绍
2013/01/16 Javascript
加随机数引入脚本不让浏览器读取缓存
2014/09/04 Javascript
jQuery的css() 方法使用指南
2015/05/03 Javascript
基于KO+BootStrap+MVC实现的分页控件代码分享
2016/11/07 Javascript
js实现随机数字字母验证码
2017/06/19 Javascript
vue.js移动端app实战1:初始配置详解
2017/07/24 Javascript
Angular4开发解决跨域问题详解
2017/08/28 Javascript
通过实例解析js简易模块加载器
2019/06/17 Javascript
Vue extend的基本用法(实例详解)
2019/12/09 Javascript
[14:57]DOTA2 HEROS教学视频教你分分钟做大人-幽鬼
2014/06/13 DOTA
Python 详解基本语法_函数_返回值
2017/01/22 Python
Django开发中的日志输出的方法
2018/07/02 Python
Python基于多线程操作数据库相关问题分析
2018/07/11 Python
搞清楚 Python traceback的具体使用方法
2019/05/13 Python
用python3 返回鼠标位置的实现方法(带界面)
2019/07/05 Python
解决win7操作系统Python3.7.1安装后启动提示缺少.dll文件问题
2019/07/15 Python
django 单表操作实例详解
2019/07/30 Python
利用pandas向一个csv文件追加写入数据的实现示例
2020/04/23 Python
html5手机键盘弹出收起的处理
2020/01/20 HTML / CSS
Wiggle美国:英国骑行、跑步、游泳、铁人三项商店
2018/10/27 全球购物
美国滑雪板和装备购物网站:Skis.com
2018/12/20 全球购物
Under Armour安德玛德国官网:美国高端运动科技品牌
2019/03/09 全球购物
美国珠宝精品店:Opulent Jewelers
2019/08/20 全球购物
个人查摆剖析材料
2014/02/04 职场文书
食堂采购员岗位职责
2014/03/17 职场文书
2014年无财产无子女离婚协议书范本
2014/10/09 职场文书
CSS3实现的文字弹出特效
2021/04/16 HTML / CSS
python中对列表的删除和添加方法详解
2022/02/24 Python