2 qq 34472241 qq_34472241 于 2016.03.29 18:53 提问

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

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

7个回答

showbo
showbo   Ds   Rxr 2016.03.29 21:24

虚拟键盘上的每个控件都增加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>
qq_34472241
qq_34472241 谢谢
一年多之前 回复
hsd2012
hsd2012   2016.03.29 18:57

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

hsd2012
hsd2012 回复qq_34472241: 每一个键给一个相同的class,每个键根据keyCode值给一个id,保存在json中,然后通过当前keycode可以获取当前用户点击元素的id。通过class可以移除上一次点击的元素的className,通过id可以给当前元素添加className
一年多之前 回复
qq_34472241
qq_34472241 获取的每个键的keycode之后呢?怎么和虚拟键盘上的每个键对应起来,令虚拟键盘上的对应的键调用那个css样式(虚拟键盘的每个小按键都是一张图片,每张图片都有一个class),方便写下代码吗?
一年多之前 回复
qq_34472241
qq_34472241   2016.03.29 19:05

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

hsd2012
hsd2012   2016.03.30 10:36

其实最简单的应该是如下:

li{cursor: pointer; list-style-type: none; border: 1px solid #F00} .activeButton{background-color: #0F0} $(function(){ $('.keyButton').click(function(){ $('.keyButton').removeClass('activeButton'); $(this).addClass('activeButton'); }); });
  • a
  • b
  • c
  • d
qq_34472241
qq_34472241 谢谢
一年多之前 回复
hsd2012
hsd2012   2016.03.30 10:38
li{cursor: pointer; list-style-type: none; border: 1px solid #F00} .activeButton{background-color: #0F0} $(function(){ $('.keyButton').click(function(){ $('.keyButton').removeClass('activeButton'); $(this).addClass('activeButton'); }); });
  • a
  • b
  • c
  • d


hsd2012
hsd2012   2016.03.30 10:39

图片说明```

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

hsd2012
hsd2012   2016.03.30 11:21

图片说明

Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!