<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>军军钢琴</title>
<style type="text/css">
body{ background-color: gainsboro;}
#myPiano{ width: 1000px; height: 612px; background-image: url(img/bg.jpg);
margin: 10px auto;}
#myKeys{ width: 962px; height: 185px; margin:0px auto;}
.itemKey{ width: 37px; height: 185px; float: left; }
</style>
</head>
<body>
<div id="myPiano">
<div style="height:420px;"></div>
<div id="myKeys">
<div class="itemKey" id="A"></div>
<div class="itemKey" id="B"></div>
<div class="itemKey" id="C"></div>
<div class="itemKey" id="D"></div>
<div class="itemKey" id="E"></div>
<div class="itemKey" id="F"></div>
<div class="itemKey" id="G"></div>
<div class="itemKey" id="H"></div>
<div class="itemKey" id="I"></div>
<div class="itemKey" id="J"></div>
<div class="itemKey" id="K"></div>
<div class="itemKey" id="L"></div>
<div class="itemKey" id="M"></div>
<div class="itemKey" id="N"></div>
<div class="itemKey" id="O"></div>
<div class="itemKey" id="P"></div>
<div class="itemKey" id="Q"></div>
<div class="itemKey" id="R"></div>
<div class="itemKey" id="S"></div>
<div class="itemKey" id="T"></div>
<div class="itemKey" id="U"></div>
<div class="itemKey" id="V"></div>
<div class="itemKey" id="W"></div>
<div class="itemKey" id="X"></div>
<div class="itemKey" id="Y"></div>
<div class="itemKey" id="Z"></div>
</div>
</div>
</body>
</html>
<script type="text/javascript">
function SetDefaultkey()
{
for(var i = 65;i<=90;i++)
{
var myChar = String.fromCharCode(i); //根据keycode获取字符
myChar=myChar.toUpperCase(); //将字符转大写
var obj = document.getElementById(myChar);
obj.style.backgroundImage = "url(img/keyUp/"+myChar+".png)";
}
}
SetDefaultkey();
document.body.onkeydown = function(e)
{
//判断音频能否播放
var audio = new Audio();
if(audio.canPlayType("audio/ogg") == false)
{
alert("您的浏览器不支持ogg音频播放!"); return;
}
var ev = e || window.event;
//判断按键是不是a-z
if((ev.keyCode>=65 && ev.keyCode<=90) == false) return;
//根据keycode获取字符，并且转大写
var myChar = String.fromCharCode(ev.keyCode);
myChar=myChar.toUpperCase();
//播放声音
audio = new Audio("ogg/"+myChar+".ogg");
audio.play();
//控制钢琴键盘高亮
var obj = document.getElementById(myChar);
obj.style.backgroundImage = "url(img/KeyDown/"+myChar+"1.png)";
}
document.body.onkeyup = function(e)
{
var ev = e || window.event;
var myChar = String.fromCharCode(e.keyCode);
var obj = document.getElementById(myChar);
obj.style.backgroundImage = "url(img/keyUp/"+myChar+".png)";
}
</script>
网友评论