菜鸟谢了一个切换歌曲的方法,不知道为什么实现不了,貌似是因为获取不到标签的内容
我导入了bootstrap的四个文件;还有,图片在我自己的电脑里

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-1.11.3.min.js" ></script>
<link rel="stylesheet" href="../css/bootstrap-theme.min.css" />
<link rel="stylesheet" href="../css/bootstrap.min.css" />
<script type="text/javascript" src="../js/bootstrap.min.js" ></script>
</head>
<body>
<div class="container">
<div class="row">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!--
自己画的logo
-->
<a href="#">
<img height="40px" style="margin-top: 5px;" src="../img/pipi音乐.jpg" />
</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<!--
搜索用表单
-->
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="素颜-许嵩">
</div>
<button type="submit" class="btn btn-default">搜索</button>
</form>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
<div class="row" style="border-radius: 15px; background-color: #999999;">
<div class="col-sm-4" >
<!--
下拉菜单
-->
<div class="row ">
<div ondblclick="h(this)" onclick="show(this)" class="btn btn-success col-sm-7 col-sm-offset-1">音乐列表</div>
</div>
<div class="col-sm-10">
<ol id="list" style=" display: none; background-color: whitesmoke; margin-top: 10px;">
<li class="btn">
许嵩,何曼婷 - 素颜
</li>
<li class="btn">
By2 - 爱丫爱丫
</li>
<li class="btn">
有澤孝紀 - Run With The Wind
</li>
<li class="btn">
胡夏 - 同桌的你
</li>
<li class="btn">
许嵩 - 玫瑰花的葬礼
</li>
<li class="btn">
许嵩 - 断桥残雪
</li>
<li class="btn">
赵雷 - 吉姆餐厅
</li>
</ol>
<div class="col-sm-6">
<a class="btn btn-primary" >添加</a>
</div>
<div class="col-sm-6">
<a class="btn btn-danger" >删除</a>
</div>
</div>
</div>
<div class="col-sm-5">
<!--
歌手的图片
-->
<div>
<img width="370px" src="../img/04/timg.jpg"/>
</div>
<!--
播放器
-->
<div id="bofang" class="col-sm-offset-2">
<audio id="mp3" autoplay="autoplay" controls="controls" src="../audio/许嵩,何曼婷 - 素颜.mp3"></audio>
</div>
</div>
</div>
</div>
<script>
//下拉菜单
function show(div){
div.innerHTML="音乐列表(单击打开)"
div.parentNode.parentNode.getElementsByTagName("ol")[0].style.display="block";
}
function h(div){
div.innerHTML="音乐列表(双击收起)"
div.parentNode.parentNode.getElementsByTagName("ol")[0].style.display="none";
}
var arr = ["许嵩,何曼婷 - 素颜.mp3",
"By2 - 爱丫爱丫.mp3",
"有澤孝紀 - Run With The Wind.mp3",
"胡夏 - 同桌的你.mp3",
"许嵩 - 玫瑰花的葬礼.mp3",
"许嵩 - 断桥残雪.mp3",
"赵雷 - 吉姆餐厅.mp3"]
//点击后切换歌曲
window.onload =function(){
var lis =document.getElementById("list").getElementsByTagName("li");
for (var i=0;i<lis.length;i++) {
lis[i].onclick=function(){
document.getElementById("mp3").pause()
document.getElementById("mp3").src="../audio/"+ lis[i].innerHTML + ".mp3"
alert(lis[i].innerHTML)
document.getElementById("mp3").currentTime =0;
document.getElementById("mp3").play()
}
}
}
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-1.11.3.min.js" ></script>
<link rel="stylesheet" href="../css/bootstrap-theme.min.css" />
<link rel="stylesheet" href="../css/bootstrap.min.css" />
<script type="text/javascript" src="../js/bootstrap.min.js" ></script>
</head>
<body>
<div class="container">
<div class="row">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!--
自己画的logo
-->
<a href="#">
<img height="40px" style="margin-top: 5px;" src="../img/pipi音乐.jpg" />
</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<!--
搜索用表单
-->
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="素颜-许嵩">
</div>
<button type="submit" class="btn btn-default">搜索</button>
</form>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
<div class="row" style="border-radius: 15px; background-color: #999999;">
<div class="col-sm-4" >
<!--
下拉菜单
-->
<div class="row ">
<div ondblclick="h(this)" onclick="show(this)" class="btn btn-success col-sm-7 col-sm-offset-1">音乐列表</div>
</div>
<div class="col-sm-10">
<ol id="list" style=" display: none; background-color: whitesmoke; margin-top: 10px;">
<li class="btn">
许嵩,何曼婷 - 素颜
</li>
<li class="btn">
By2 - 爱丫爱丫
</li>
<li class="btn">
有澤孝紀 - Run With The Wind
</li>
<li class="btn">
胡夏 - 同桌的你
</li>
<li class="btn">
许嵩 - 玫瑰花的葬礼
</li>
<li class="btn">
许嵩 - 断桥残雪
</li>
<li class="btn">
赵雷 - 吉姆餐厅
</li>
</ol>
<div class="col-sm-6">
<a class="btn btn-primary" >添加</a>
</div>
<div class="col-sm-6">
<a class="btn btn-danger" >删除</a>
</div>
</div>
</div>
<div class="col-sm-5">
<!--
歌手的图片
-->
<div>
<img width="370px" src="../img/04/timg.jpg"/>
</div>
<!--
播放器
-->
<div id="bofang" class="col-sm-offset-2">
<audio id="mp3" autoplay="autoplay" controls="controls" src="../audio/许嵩,何曼婷 - 素颜.mp3"></audio>
</div>
</div>
</div>
</div>
<script>
//下拉菜单
function show(div){
div.innerHTML="音乐列表(单击打开)"
div.parentNode.parentNode.getElementsByTagName("ol")[0].style.display="block";
}
function h(div){
div.innerHTML="音乐列表(双击收起)"
div.parentNode.parentNode.getElementsByTagName("ol")[0].style.display="none";
}
var arr = ["许嵩,何曼婷 - 素颜.mp3",
"By2 - 爱丫爱丫.mp3",
"有澤孝紀 - Run With The Wind.mp3",
"胡夏 - 同桌的你.mp3",
"许嵩 - 玫瑰花的葬礼.mp3",
"许嵩 - 断桥残雪.mp3",
"赵雷 - 吉姆餐厅.mp3"]
//点击后切换歌曲
window.onload =function(){
var lis =document.getElementById("list").getElementsByTagName("li");
for (var i=0;i<lis.length;i++) {
lis[i].onclick=function(){
document.getElementById("mp3").pause()
document.getElementById("mp3").src="../audio/"+ lis[i].innerHTML + ".mp3"
alert(lis[i].innerHTML)
document.getElementById("mp3").currentTime =0;
document.getElementById("mp3").play()
}
}
}
</script>
</body>
</html>
...全文
相关推荐
菜鸟商城(完整源码)
菜鸟商城完整版源码,没有视频,我等级最大上传70M,太大没法上传,你看到的所谓完整版先看看他等级对应上传限制就知道是不是完整版了哈哈 所以发个文档,内置下载链接。上一个链接失效找不到删的地方,不要再下载了。同时下载的朋友评价一下。
利用HTML5+Socket.io实现摇一摇控制PC端歌曲切换
主要介绍了利用HTML5+Socket.io实现摇一摇控制PC端歌曲切换,非常具有实用价值,需要的朋友可以参考下。
菜鸟用标签做分页
博文链接:https://xueguiping.iteye.com/blog/123607
w3cschool菜鸟教程离线版( 完整 )
w3cschool菜鸟教程离线版( 完整 ) chm javascript html等等
菜鸟浏览器
用来搜索qq空间背景音乐,输入搜索的qq,就可以知道qq空间的背景音乐


