html頁面:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Keyborad</title>
<link rel="Stylesheet" type="text/javascript" href="css/music.css"/>
<script language="javascript" type="text/javascript" src="js/music.js"></script>
<script language="javascript" type="text/javascript">
window.οnlοad=assignKeys;
</script>
</head>
<body>
<div id="keyboard" class="musicalkeys">
<div class="do musicalButton"></div>
<div class="re musicalButton"></div>
<div class="mi musicalButton"></div>
<div class="fa musicalButton"></div>
<div class="so musicalButton"></div>
<div class="la musicalButton"></div>
<div class="ti musicalButton"></div>
<div class="do musicalButton"></div>
</div>
<div id="console" class="console"></div>
</body>
</html>
CSS文件:
.body
{
background-color:White;
}
.musicalkeys
{
background-color:#ffe0d0;
border:solid maroon 2px;
width:536px;
height:68px;
top:24px;
left:24px;
margin:4px;
position:absolute;
overflow:auto;
}
.musicalButton
{
border:solid navy 1px;
width:60px;
height:60px;
position:relative;
margin:2px;
float:left;
}
.do
{
background-color:Red;
}
.re
{
background-color:Orange;
}
.mi
{
background-color:Yellow;
}
.fa
{
background-color:Green;
}
.so
{
background-color:Blue;
}
.la
{
background-color:Gray;
}
.ti
{
background-color:Olive;
}
div.console
{
font-size:16px;
font-family:Arial,helvetica;
color:Navy;
background-color:White;
border:solid navy 2px;
width:536px;
height:320px;
top:106px;
left:24px;
margin:4px;
position:absolute;
overflow:auto;
}
javascript文件:
// JScript File
function assignKeys()
{
var keyboard=document.getElementById("keyboard");
var keys=keyboard.getElementsByTagName("div");
if(keys)
{
for(var i=0;i<keys.length;i++)
{
var key=keys[i];
var classes=(key.className).split(" ");
if(classes && classes.length>=2 && classes[1]=="musicalButton")
{
var note=classes[0];
key.note=note;
key.οnmοuseοver=playNote;
}
}
}
}
function playNote(event)
{
var note=this.note;
var console=document.getElementById("console");
if(note && console)
{
console.innerHTML+=note+" . ";
}
}