(《javascript&jquery交互式web前端開發》學習記錄)
HTML5:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Audio Note</title>
<link rel="stylesheet" href="audio-note.css" />
</head>
<body>
<div id="page">
<h1>ListKing</h1>
<h2 id="noteName">Audio Note</h2>
<form action="">
<label for="noteInput">Add the note title: </label>
<input type="text" id="noteInput"/>
<div id="buttons"><a data-state="record" href="">record</a>
</div>
</form>
</div>
<script src="audio-note.js"></script>
</body>
</html>
CSS3:
@charset "UTF-8";
/* CSS Document */
body{
background:#000000;
font:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
color:#FFFFFF;
}
#page{
background:#606060;
max-width:480px;
margin:0 auto;
padding:0;
}
h1{
background:url(kinglogo.png) no-repeat center;
text-indent:-1000%;
overflow:hidden;
height:75px;
width:117px;
line-height:75px;
margin:0 auto;
padding:30px 10px 20px;
}
h2{
text-align:center;
font-size:200%;
}
form{
padding:0px 60px 65px;
}
label{
display:block;
margin:10px auto;
font-size:150%;
}
input{
display:block;
background-color:#C6C6C6;
border:1px solid #C6C6C6;
border-radius:8px;
width:100%;
font-size:200%;
margin:10px auto;
}
input:focus{
background-color:#FFFFFF;
border:1px solid #FFFFFF;
}
#buttons{
width:100px;
height:100px;
margin:0 auto;
}
#buttons a{
width:100px;
height:100px;
text-indent:100%;
margin-top:20px;
display:inline-block;
white-space:nowrap; /*不換行*/
overflow:hidden;
}
a[data-state='stop']{
background-image:url('pause.png');
}
a[data-state='record']{
background-image:url('record.png');
}
// JavaScript Document
var noteInput,noteName,textEntered,target;
noteName=document.getElementById('noteName');
noteInput=document.getElementById('noteInput');
function writeLabel(e){
if(!e){ //8-11行，兼容IE5-IE8
e=window.event;
}
target=e.target||e.srcElement;
textEntered=target.value;
noteName.textContent=textEntered;
}
function recorderControls(e){
if(!e){
e=window.event;
}
target=e.target||e.srcElement;
if(e.preventDefault){ //取消事件的默認動作，這裏爲點擊不 打開某個鏈接
e.preventDefault();
}else{ //兼容IE5-IE8
e.returnValue=false;
}
switch(target.getAttribute('data-state')){
case 'record':
record(target);
break;
case 'stop':
stop(target);
break;
}
}
function record(target){
target.setAttribute('data-state','stop');
target.textContent='stop';
}
function stop(target){
target.setAttribute('data-state','record');
target.textContent='record';
}
if(document.addEventListener){
document.addEventListener('click',function(e){
recorderControls(e);
},false);
noteInput.addEventListener('input',writeLabel,false);
}else{ //兼容IE5-IE8
document.attachEvent('onclick',function(e){
recorderControls(e);
});
noteInput.attachEvent('onkeyup',writeLabel);
}代碼下載：http://download.csdn.net/detail/qq_17615475/9351241