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

最新推荐文章于 2025-10-17 14:42:42 发布

原创最新推荐文章于 2025-10-17 14:42:42 发布 · 3.8k 阅读

1 ·

CC 4.0 BY-SA版权

Javascript 专栏收录该内容

27 篇文章

订阅专栏

本文通过JavaScript实现了一个简单的交互式示例，展示如何将键盘上的字符转换为其对应的ASCII码，以及如何将ASCII码转回字符。通过监听键盘事件，页面能够实时显示用户按下按键的ASCII码，并高亮显示对应的按键。

首先我们需要弄清楚

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>

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