music.html
复制内容到剪贴板
代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhmtl1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Keyboard</title>
<link rel="stylesheet" type="text/css" href="./musical.css" />
<script type="text/javascript" src="./musical.js"></script>
<script type="text/javascript">
<!--
window.onload = assignKeys;
//-->
</script>
</head>
<body>
<div id="Keyboard" class="musicalKeys">
<div class='do musicalButten'></div>
<div class='re musicalButten'></div>
<div class='mi musicalButten'></div>
<div class='fa musicalButten'></div>
<div class='so musicalButten'></div>
<div class='la musicalButten'></div>
<div class='ti musicalButten'></div>
<div class='do musicalButten'></div>
</div>
<div id="console" class="console"></div>
</body>
</html>musical.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;
}
.do{background-color:red;}
.re{background-color:orange;}
.mi{background-color:yellow;}
.fa{background-color:green;}
.so{background-color:blue;}
.la{background-color:indigo;}
.ti{background-color:violet;}
div.console{
font-family:arial,helvetica;
font-size:16px;
color:navy;
background-color:white;
border:solid navy 2px;
width:536px;
height:320px;
top:106px;
left:24px;
margin:4px;
position:absolute;
overflow:auto;
}musical.js
复制内容到剪贴板
代码:
alert("fdafdsa");
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 && class.length >=2 && classes[1] == "musicalButten")
{
var note = classes[0];
key.note = note;
key.onmouseover = playNote;
}
}
}
function playNote(event)
{
var note = this.note;
var console = document.getElementById('console');
if(note && console){
console.innerHTML+=note+" . ";
}
}不知道哪儿有问题,调用外部脚本的时候就出错拉,有人帮我调试下吗?万分感谢
