钢琴实现
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
ul{
list-style:none;
}
#piano{
width:1200px;
height:400px;
border:solid 1px #000;
margin:100px auto;
display:flex;
}
li{
flex:1;
height:100%;
border-right:solid 1px #000;
line-height: 400px;
text-align: center;
}
</style>
</head>
<body>
<ul id="piano">
</ul>
<audio src=""></audio>
<script>
var audio = document.querySelector('audio');
//创建li元素 [c3 c4 c5 c6]
var arr = ['c','d','e','f','g','a','b'];
for(var i=4;i<=5;i++){
for(var j=0;j<arr.length;j++){
//创建li
var li = document.createElement('li');
li.innerHTML = arr[j]+''+i;
piano.appendChild(li);
//绑定单击事件
li.onclick = function(){
var lis = document.querySelectorAll('li');
lis.forEach(function(li){
li.style.background = 'white';
})
//改变颜色
this.style.background = 'pink';
//修改audio标签的src属性
audio.src = 'http://s8.qhimg.com/share/audio/piano1/'+this.innerHTML+'.mp3';
//播放
audio.play();
}
}
}
// qwer 一排按键的按键码
var keyCodes = [9, 81, 87, 69, 82, 84, 89, 85, 73, 79, 80, 219, 221, 220];
//绑定键盘的按下事件
window.onkeydown = function(e){
// 81 => 2
var keycode = e.keyCode;
//通过按键码得到下标
var index = getIndex(keycode);
//触发指定元素的 click 事件即可
var lis = document.querySelectorAll('li');
lis[index].click();
}
//通过值获取下标
function getIndex(v){
for(var i=0;i<keyCodes.length;i++){
if(v == keyCodes[i]){
return i;
}
}
}
</script>
</body>
</html>
浙公网安备 33010602011771号