前端JS组合键初体验

因为是第一次写文档,还不会创建GIF动图,所以这里放一张静态的实例图,写文档有助于自己的提升,知识的回忆,和各位大神互相学习。下面直接进入组合键简单操作:

需求:要求手指同时按下上下左右中的某两个键或多个键,红色方块做出对应的移动。

分析:人应该在同一毫秒类按下两个键的几率不大,多数时候都会是一前一后按下两个键,但是这中间怎么判断我们是按下了两个键,而不是单纯的只响应成一前一后的两个键(就是把两个动作组合到一起)。

实现:既然是键盘按键,首先想到的应该是onkeydown这个函数,这里我们用绑定事件来实现,既然要讲两个按钮事件组合到一起,那我们就需要把按下的两个按钮记录下来,因为系统不会自动给你记录,系统也没发现有可以支持两个按妞的函数。下面就开始一步步实现:

var div = document.getElementsByTagName("div")[0];//获取都方块元素

var key_press = {};//创建一个json对象,用于存储按钮的对应数字代码和被按下的记录

document.addEventListener('keydown',function(ev) {

    ev=ev||window.event;//这句代码是为了兼容IE浏览器而有的,要知道具体的,写代码自己测试几     遍就知道了

     key_press[ev.keyCode]=true;//这句代码就是重点

    //这里我用的json对象来记录多个按钮被按下的操作,如果按下这个按钮,我们就赋值为true;

});

//按照正常思维理解,按下了键,赋值为true,那我们是不是就还需要有松开按钮的动作,送开了也要给它一个值用于记录

document.addEventListener('keyup',function(ev) {

     ev=ev||window.event;//同上理

     key_press[ev.keyCode]=false;//这里就是如果我们松开按钮了,就把值设置为false.

});

到了这里如果你还不知道怎么写,那我建议你循环打印出json对象

for(var keys in key_press){

   console.log(keys+"---"+key_press[keys]);//参考打印出来的值,有助于你结合上面的思路知道下一步应该怎么写,结果肯定是 keys是ev.keyCode的代码值(键值),true和false应该是value值

}

实现过程中,上面的循环只为了参考数据提供思路,实现过程中用不上 上面的循环

下面我们来说最后一步,既然我们记录好了同时按下的键值了(如果value值为true,说明被按下),那我们就可以通过true做条件判断,下面写的代码很冗余,但是方便理解


代码太多,直接截图上(有更简单的实现方式,效果差的不多,但是还是有一点点的小差距的,差距是我这种写法可以改变速度,那种简单的方式改变速度很麻烦)

上面的函数moveDIV();只要直接调用就可以了,不过既然提到了改变速度,所以我们需要用到定时器

调用方法 setInterval(moveDIV,50);改变这里的时间,可以改变速度

用于给写组合键没有思路的人提供点思路,代码有点丑,勿怪!

尊重原创,转载请注明:http://www.jianshu.com/writer#/notebooks/15846537/notes/16290589 侵权必究!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,179评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,229评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,032评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,533评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,531评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,539评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,916评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,574评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,813评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,568评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,654评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,354评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,937评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,918评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,152评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,852评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,378评论 2 342

推荐阅读更多精彩内容