6-2钢琴黑白键

HTML5 Web钢琴，使用鼠标单击进行弹奏
支持浏览器：FireFox、Chrome

• c4
  c4m
• d4
  d4m
• e4
• f4
  f4m
• g4
  g4m
• a4
  a4m
• b4
• c5

CSS:
/* 给所有标签清除内边距、外边距、默认样式和边框*/
*{ padding:0; margin:0 ; list-style:none; border:0;}
.main {
margin:0 auto;
width:600px;
height:420px;
position:relative;
top:150px;
}
ul li{
width:60px;
height:360px;
float:left;/向左浮动/
position:relative;
}
div.key {
position: absolute;
float:left;
top:40px;
text-align: center;
font-size:16px;
background-position: bottom left;/背景位置：垂直方向在底部 水平方向在左边/
background-repeat: repeat-x;/背景水平方向平铺/

}
/当鼠标悬浮在该元素时设置背景颜色为#cacbd1，鼠标变为“小手”/
.key:hover{
background-color: #cacbd1;
cursor:pointer;
}
div.whiteKey {
width:60px;
height:360px;
color:#666;
background-color:#eee;
border: 2px solid #999;
background-image:url("…/images/key_back_white.png");
}
div.blackKey {
width:36px;
height:200px;
color:#ccc;
margin-left: 40px;
z-index: 999;/z-index属性值越大，该元素层离用户越近/
background-color:#666;
border: 2px solid #666;
background-image:url("…/images/key_back_black.png");
}

JS:
//页面加载完毕后执行
window.onload = function(){
//获取所有的div琴键
var mydivs = document.getElementsByTagName(“div”);
//获取所有的audio音频源
var myaudios = document.getElementsByTagName(“audio”);
//通过数组的下标获取每个琴键和每个音频，数组的下标从0开始。
// 使用for循环来循环调用音频的load()和play()方法
for(var i = 0 ; i <14; i++){
mydivs[i].index = i;
//当鼠标单击某个琴键时，加载相应的音频（调用load()方法），并且播放（调用play()方法）
mydivs[i].onclick = function(){
myaudios[this.index].load(); //保持余音绕梁，开启新的声音
myaudios[this.index].play();
}
}
}