您的位置：首页 > Web前端 > JavaScript

<html5+css3+js>一个audio note界面

2015-12-10 14:54 746 查看

(《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');
}

JS:

// 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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航