qq_34472241
2016-03-29 10:53
采纳率: 0%
浏览 1.7k

JavaScript怎样实现咋键盘上按下不同的键,页面上不同的div调用同一个css样式

图片说明
这是页面上的一个虚拟键盘,我想实现的是当我在电脑的键盘上按键后,虚拟键盘上的相对应的键会有不同的显示效果(调用一个css)(虚拟键盘上的每一个小键都是一个图片),就是当我按下不同的按键,页面上相对的键所在的div就会调用同一个css

  • 写回答
  • 好问题 提建议
  • 关注问题
  • 收藏
  • 邀请回答

5条回答 默认 最新

  • 我爱默小兜 2016-03-29 10:57

    这是使用js,onkeydown事件来实现的,然后比较 e.keyCode值,判断是按得哪一个键。不同的键对应的keycode是不一样的,然后把改变css样式封装在函数里面,调用就可以了

    评论
    解决 无用
    打赏 举报
  • qq_34472241 2016-03-29 11:05

    获取的每个键的keycode之后呢?怎么和虚拟键盘上的每个键对应起来,令虚拟键盘上的对应的键调用那个css样式(虚拟键盘的每个小按键都是一张图片,每张图片都有一个class),方便写下代码吗?

    评论
    解决 无用
    打赏 举报
  • 虚拟键盘上的每个控件都增加keycode属性,然后document.onkeydown获取时间的keycode属性后获取控件添加个样式,过100ms再移除什么的

    
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
    <style>
        .focus{background:#f00}
    </style>
    <div id="dvKB">
        <input type="button" value="ESC" kc="27" /> <input type="button" value="A" kc="65" /> <input type="button" value="B" kc="66" /> <input type="button" value="C" kc="67" />
    </div>
    <script>
        $(document).keydown(function (e) {
            var o = $('#dvKB input[kc=' + e.keyCode + ']');
            if (o.length) {
                o.addClass('focus');
                setTimeout(function () {o.removeClass('focus') }, 100);
            }
        })
    </script>
    
    评论
    解决 无用
    打赏 举报
  • 我爱默小兜 2016-03-30 02:39

    图片说明```

    代码显示不了,只好给你截图一下

    评论
    解决 无用
    打赏 举报
  • 我爱默小兜 2016-03-30 03:21

    图片说明

    评论
    解决 无用
    打赏 举报

相关推荐 更多相似问题