gpt4 book ai didi

javascript - 键盘布局的 JS 颜色更改

转载 作者:行者123 更新时间:2023-11-28 16:17:59 24 4
gpt4 key购买 nike

我在学校有一项作业,制作键盘布局,然后在按下时更改按键的颜色。这意味着我需要使用 .keydown .keyup eventListener 等。

我只需要一个示例代码来帮助我开始。我提供了一些我的代码,只是为了让您了解我正在努力完成的事情。

<!DOCTYPE html>

<div class="keyboard" id="keys">

<div class="section-a">

<div class="key tab" id="Tab">

&#x21e5;

</div>

<!-- end of special keys pt.1 -->

<!-- letter row pt.1 -->

<div class="key letter" id="KeyQ">
Q
</div>

<div class="key letter" id="KeyW">
W
</div>

<div class="key letter" id="KeyE">
E
</div>

<div class="key letter" id="KeyR">
R
</div>

<div class="key letter" id="KeyT">
T
</div>

<div class="key letter" id="KeyY">
Y
</div>

<div class="key letter" id="KeyU">
U
</div>

<div class="key letter" id="KeyI">
I
</div>

<div class="key letter" id="KeyO">
O
</div>

<div class="key letter" id="KeyP">
P
</div>

<div class="key letter" id="BracketLeft">
Å
</div>

<!-- end of letter row pt.1 -->

<!-- special keys pt.2 -->

<div class="key dual" id="BracketRight">
^
<br> ¨
</div>

<div class="key enter upper" id="Enter">
&#8617;
</div>

<div class="key caps" id="CapsLock">
&#8682
</div>

<!-- end of special keys pt.2-->

最佳答案

我没有搜索特殊键,但这里有一个简单的示例,说明如何在按下字母时更改字母的颜色。不是最好的解决方案,但您可以从这里尝试更多。

var colorMap = {
'q' : 'blue',
'w' : 'red',
'e' : 'yellow'
};

var letterPressed= "";

$(document).on('keyup', function(e){
var letterMap = String.fromCharCode(e.which).toLowerCase();
var letter = document.getElementById("Key" + letterPressed.toUpperCase() );
letter.style.color = colorMap[letterMap];
});

document.onkeypress = function(evt) {
evt = evt || window.event;
var charCode = evt.keyCode || evt.which;
letterPressed = String.fromCharCode(charCode);
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<div class="keyboard" id="keys">
<div class="section-a">

<div class="key letter" id="KeyQ"> Q </div>
<div class="key letter" id="KeyW"> W </div>
<div class="key letter" id="KeyE"> E </div>

</div>
</div>

关于javascript - 键盘布局的 JS 颜色更改,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56476655/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com