<!DOCTYPE HTML>
<html>
<head>
<style>
*{margin:0;padding:0;}
body{padding:30px;background:#9e9e9e}
header{width:500px;margin:0 auto;text-align:center}
.content{width:510px;overflow-y:auto;margin:0 auto; padding:5px; font-size:24px;box-shadow:10px 10px 5px #888888;background:#a1887f;}
.musicDiv{width:500px;height:50px;margin:0px auto;line-height:50px;cursor:pointer}
.line{width:500px;height:2px;background:white;float:left;margin:5px 0}
.clear{clear:both}
</style>
<script>
var olderBox;//記錄前一個播放的音樂位置
var currentBox;
var stateImg;
window.onload = function()
{
var player = document.getElementById("player");
player.addEventListener('pause',function()
{
if(currentBox != null)
stateImg[0].src="pause.png";
},false);
player.addEventListener('playing',function()
{
if(currentBox != null)
stateImg[0].src="play.png";
},false);
}
function play(obj)
{
//alert(obj);
//var box = document.getElementsByName("box");
currentBox = obj;
stateImg = obj.getElementsByTagName("img");
if(olderBox != obj)
{
if(olderBox != null)
{
stateImg1 = olderBox.getElementsByTagName("img");
stateImg1[0].src = "";
}
olderBox = obj;
var box1 = obj.getElementsByTagName("span");
var songName = "music/" + box1[0].innerText+".mp3";
player.src = songName;
player.play();
stateImg[0].src="play.png";
}else
{
if(player.paused)
{
player.play();
stateImg[0].src="play.png";
}
else
{
player.pause();
stateImg[0].src="pause.png";
}
}
}
function changeState()
{
alert("點選");
if(current != null)
{
if(player.paused)
{
stateImg[0].src="pause.png";
}else
{
stateImg[0].src="play.png";
}
}
}
</script>
</head>
<body>
<header><h1>音樂播放清單</h1></header>
<div style="width:510px;height:30px;margin:10px auto;" οnclick="changeState()">
<audio id="player" controls="controls" style="width:510px;"></audio>
</div>
<div id="content" class="content">
<script>
var content = document.getElementById("content");
var clientHeight = document.documentElement.clientHeight-document.documentElement.scrollTop;
content.style.height = clientHeight+'px';
</script>
<div class="musicDiv" style="margin-top:0" name="box" οnclick="play(this)">
<div style="width:450px;height:50px;float:left;">
<span name="songName">1.給你們</span><span name="singer"> - 張宇</span>
</div>
<div style="width:50px;height:50px;float:left;text-align:center;">
<img style="vertical-align:middle;">
</div>
<div class="line"></div>
</div>
<div class="musicDiv" name="box" οnclick="play(this)">
<div style="width:450px;height:50px;float:left;">
<span>2.Thanks for your love</span><span> - 劉德華</span>
</div>
<div style="width:50px;height:50px;float:left;text-align:center;">
<img style="vertical-align:middle;">
</div>
<div class="line"></div>
</div>
<div class="musicDiv" name="box" οnclick="play(this)">
<div style="width:450px;height:50px;float:left;">
<span>3.酒幹倘賣無</span><span> - 蘇芮</span>
</div>
<div style="width:50px;height:50px;float:left;text-align:center;">
<img style="vertical-align:middle;">
</div>
<div class="line"></div>
</div>
<div class="clear"></div>
</div>
</body>
</html>
![css超連結之新聞清單[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)