JS中使用onkeydown事件来实现键盘效果

来源：互联网发布：软件系统项目总结编辑：程序博客网时间：2024/04/25 05:53

首先我们需要弄清楚

str="a";

code = str.charCodeAt(); //将字符转为对应的ASCII码

str2 = String.fromCharCode(code);//将ASCII码转为对应的字符

<style type="text/css">li{cursor: pointer; list-style-type: none; border: 1px solid #F00;width: 80px;float: left; text-align: center; height: 30px; line-height: 30px;}.activeButton{background-color: #0F0}</style><script type="text/javascript" src="./js/jquery-1.7.2.min.js"></script><script type="text/javascript">$(function(){var allKey=['~','!','@','#','$','%','^','&','*','(',')','-','+','Q','W','E','R','T','Y','u','I','O','P','A','S','D','F','G','H','J','K','L','Z','X','C','V','B','N','M'];var strHtml='';var code;for (var i = 0; i < allKey.length; i++) {code = allKey[i].charCodeAt(); //将字符转为对应的ASCII码strHtml+='<li class="keyButton" id="key'+code+'">'+allKey[i]+'</li>'};$("#keyBox").html(strHtml);$(window).keydown(function(event){var id="#key"+event.keyCode;$('.keyButton').removeClass('activeButton').filter(id).addClass('activeButton');});});</script><div style="width:1000px; margin:0 auto; "><ul id="keyBox"></ul></div>

你在键盘上相应的键，相应的键会变绿色。

0 0