<!doctype html>
<html lang=
"en"
>
<!--
需求:通过键盘点击,结合键盘事件来模拟按下了哪个键。
onkeydown
onkeyup
思路:
1.在onload事件中创建键盘视图
2.定义一个输入框来接收和触发键盘事件
3.同时返回按下的那个键的keyCode值
-->
<head>
<meta charset=
"UTF-8"
>
<meta name=
"Generator"
content=
"EditPlus"
>
<meta name=
"Author"
content=
""
>
<meta name=
"Keywords"
content=
""
>
<meta name=
"Description"
content=
""
>
<title>模拟键盘</title>
<style type=
"text/css"
>
#keycontainer{
border:3px solid red;
padding:50px 50px;
}
span{
border:1px solid red;
background:black;
width:50px;
color:white;
font-size:1cm;
display:inline-block;
padding:1px;
}
#input{
border:1px solid red;
}
</style>
</head>
<body onload=
"initView();"
>
<marquee behavior=
"alternate"
><font size=
"6"
color=
"BlueViolet"
><b>键盘测试程序 作者:陈章 黑马程序员【Android70期】</b></font></marquee>
<div id=
"keycontainer"
></div>
<hr/>
请在下面的文本框中按下任意一个键<br/>
<input type=
"text"
id=
"input"
onkeydown=
"keydown(event);"
onkeyup=
"keyup(event);"
/>
<!--播放音频-->
<audio id=
"soundplayer"
>您的浏览器不支持audio元素</audio>
</body>
<script type=
"text/javascript"
>
function
outln(str)
{
document.writeln(str);
}
function
out(str)
{
document.write(str);
}
function
byID(id)
{
return
document.getElementById(id);
}
var
colorBefore;
var
soundplayer = byID(
"soundplayer"
);
function
playsrc(src)
{
soundplayer.src = src ;
soundplayer.play();
}
function
byName(name)
{
return
document.getElementsByName(name)[0];
}
function
keydown(e)
{
var
keys = document.getElementsByTagName(
"span"
);
for
(
var
i = 0; i < keys.length; i++)
{
var
each = keys[i];
if
(each.innerHTML == String.fromCharCode(e.keyCode))
{
playsrc(
"recordings/"
+ String.fromCharCode(e.keyCode) +
".wav"
);
colorBefore = each.style.backgroundColor;
each.style.backgroundColor =
"blue"
;
return
;
}
playsrc(
"recordings/UDK.wav"
);
}
}
function
keyup(e){
var
keys = document.getElementsByTagName(
"span"
);
for
(
var
i = 0; i < keys.length; i++)
{
var
each = keys[i];
if
(each.innerHTML == String.fromCharCode(e.keyCode))
{
each.style.backgroundColor = colorBefore;
byID(
"input"
).value=String.fromCharCode(e.keyCode) +
" keyCode值:"
+ e.keyCode;
return
;
}
byID(
"input"
).value=
"? keyCode值:"
+ e.keyCode;
}
}
function
initView()
{
var
main = byID(
"keycontainer"
);
var
s =
""
;
s +=
"<span >Q</span > "
;
s +=
"<span >W</span> "
;
s +=
"<span >E</span> "
;
s +=
"<span >R</span> "
;
s +=
"<span >T</span> "
;
s +=
"<span >Y</span> "
;
s +=
"<span >U</span> "
;
s +=
"<span >I</span> "
;
s +=
"<span >O</span> "
;
s +=
"<span >P</span> <br/><br/>"
;
s +=
" <span >A</span> "
;
s +=
"<span >S</span> "
;
s +=
"<span >D</span> "
;
s +=
"<span >F</span> "
;
s +=
"<span >G</span> "
;
s +=
"<span >H</span> "
;
s +=
"<span >J</span> "
;
s +=
"<span >K</span> "
;
s +=
"<span >L</span> <br/><br/>"
;
s +=
" <span >Z</span> "
;
s +=
"<span >X</span> "
;
s +=
"<span >C</span> "
;
s +=
"<span >V</span> "
;
s +=
"<span >B</span> "
;
s +=
"<span >N</span> "
;
s +=
"<span >M</span> "
;
main.innerHTML = s;
}
</script>
</html>