同步课 / 2014级HTML5方向-HTML5基础

张志敏

给 #2014级HTML5方向-HTML5基础# 指派了新任务。
为课上示例6-2添加功能：编辑
让便签可编辑，要求：不限形式，在原有功能的基础上实现修改便签功能即可

8班-孙立昆

http://10.7.1.98/201408sunlikun/H5/

5班-赵森

http://10.7.1.4/201405zhaosen/HTML5%E5%A4%A7%E4%B8%89%E7%AC%AC%E4%B8%80%E5%AD%A6%E6%9C%9F%E4%BD%9C%E4%B8%9A/2-7%E9%9F%B3%E4%B9%90%E6%92%AD%E6%94%BE%E5%99%A8/zhaosen.html

6班-孙士嘉

http://10.7.1.98/201406sunshijia/%E5%AE%9E%E8%AE%AD/

5班-米明豪

我认为不是一种好的用户体验，有的音乐播放出来可能不是我们真正想听的。

7班-郭正洋

http://10.7.1.98/201407guozhengyang/%e5%a4%a7%e4%b8%89/2-7/

张志敏

给 #2014级HTML5方向-HTML5基础# 指派了新任务。
3 制作河北师范大学导航图
参考下图制作河北师范大学导航图

7班-张星光

<!DOCTYPE html>
<html>
<head>
<title>音乐播放器</title>
<meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="css/jquery.mobile-1.2.0.min.css" />
<link rel="stylesheet" href="css/style.css" />
<script src="js/jquery-1.8.2.min.js"></script>
<script src="js/jquery.mobile-1.2.0.js"></script>
<script>
$(function(){
//播放器样式设置
playwidth = $(window).width();
outerwidth = playwidth*0.9;
$("#outer").css('width',outerwidth);
$("#rate").css('width',outerwidth*0.6);
$("#ratetime").css('width',outerwidth*0.1);

//设置内容区域的高度，确保播放区域位于页面靠下位置
$("#content").css('height',$(window).height()*0.75);
//获取audio元素
var audio = document.getElementById("audios");

$("#content a").click(function(){
var text = $(this).text();//获取文字是播放还是停止
if(text=="播放"){
//选中哪首音乐哪首音乐开始播放
var which = $(this).attr('href');
audio.src = which;
audio.play();

//文字变成“停止”
$("#content a").text("播放");
$(this).text("停止");
//音乐播放器按钮图标变成“暂停”图标
//设置播放状态背景图片位置为（-70px -25px）
$("#playp").css('background-position','-70px -25px');

var timer=setInterval(function(){
var total=audio.duration;
var now=audio.currentTime;

//播放进度随时显示
var progress=now/total;
var width=progress*($("#rate").width());
$("#ratemid").css('width',parseInt(width));
//播放时间的提示更新
var totalTime=(total/60).toFixed(2);
var nowTime=(now/60).toFixed(2);
$("#ratetime").text(nowTime+'/'+totalTime);

},1000)
//点击暂停按钮
$("#playp").click(function(){
audio.pause();
$("#playp").css('background-position','-50px -25px');

});
//快进、快退
$("#next").click(function(){
audio.currentTime=audio.currentTime+4;

});
$("#prv").click(function(){
audio.currentTime=audio.currentTime-4;
});

}else{
$(this).text("播放");

audio.pause();

clearInterval(timer);

$("#playp").css('background-position','-50px -25px');

//点击开始按钮
$("#playp").click(function(){
audio.play();
$("#playp").css('background-position','-70px -25px');

});
//快进、快退
$("#next").click(function(){
audio.currentTime=audio.currentTime+4;

});
$("#prv").click(function(){
audio.currentTime=audio.currentTime-4;
});

}
return false;
});
//若链接文字是“播放”，单击时

});

</script>
<style>

</style>
</head>
<body>
<div data-role="page">
<div data-role="header" data-position="fullscreen">
<div data-role="navbar">
<ul>
<li><a href="#" class="ui-btn-active">在线音乐</a></li>
<li><a href="#">本地音乐</a></li>
</ul>
</div>
</div>
<div data-role="content" id="content" >
<div>
<div style="float:left;width:80%;height:30px;font:12px;">千千阙歌</div>
<div style="float:left;width:20%;height:30px;font:12px;">
<a href='music/02.mp3' id='play'>播放</a>
</div>
</div>
<div>
<div style="float:left;width:80%;height:30px;font:12px;">思念人之屋</div>
<div style="float:left;width:20%;height:30px;font:12px;">
<a href='music/01.mp3' id='play'>播放</a>
</div>
</div>
</div>
<div data-role="footer" class="ui-bar">
<audio src="music/02.mp3" id='audios' ></audio>

<div id="outer">

<div id="control">
<div id="prv">&nbsp</div>
<div id="playp" class='ply'></div>
<div id="next">&nbsp</div>
</div>


<div id="rate">
<div id="ratetop"></div>
<div id="ratemid"></div>
<div id="ratemidtop">&nbsp</div>
<div id="ratebom"></div>
</div>

<div id="ratetime">
</div>

<div id="volume"></div>

</div>


</div>
</div>
</body>
</html>