ajax - 簡單的客戶端MVC實現例子

1.murical.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>  
    <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>
    <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>
   </DIV>
  </body>
</html>

2.musical.css
.body{
 background-color:white; 
}
.musicalKeys{
 background-color:#ffe0d0;
 boarder: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: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;
}

3.musical.js
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.onmouseover=playNote;
    key.onclick = playNote;
   }
  }
 }
}

function playNote(event){
 var note = this.note;
 var console = document.getElementById("console");
 if(note && console){
  console.innerHTML += note + ".";
 }
}

posted on 2006-08-10 17:03 software5168 阅读(460) 评论(0)  编辑  收藏 所属分类: Java學習


只有注册用户登录后才能发表评论。


网站导航:
 
<2006年8月>
303112345
6789101112
13141516171819
20212223242526
272829303112
3456789

导航

统计

常用链接

留言簿(3)

随笔分类

随笔档案

收藏夹

JAVA學習網站

綜合

搜索

积分与排名

最新评论

阅读排行榜

评论排行榜