菜鸟谢了一个切换歌曲的方法,不知道为什么实现不了,貌似是因为获取不到
  • 标签的内容

    • 一贯可乐 2017-12-29 04:59:55
    我导入了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>
    ...全文
    183 1 打赏 收藏 转发到动态 举报
    写回复
    用AI写文章
    1 条回复
    切换为时间正序
    请发表友善的回复…
    发表回复
    天际的海浪 2017-12-29
    • 打赏
    • 举报
     回复
    document.getElementById("mp3").src="../audio/"+ this.innerHTML + ".mp3"
    Web Components 新前端组件新手菜鸟快速入门与实战
    本套课程，大喵将带着大家手把手从 0 到 1，从菜鸟零基础到熟练掌握，使用 Web Components 基于原生的新前端组件技术，用有趣的堆积木的方式，开发实战一个带动画交互的组件式移动端 WEB 应用。组件式开发是前端发展的方向，现在流行的 React 和 Vue 都是组件框架。如果你不想调用任何的JS框架，却想要基于原生组件式开发，独立封装JS、HTML、CSS内容，而且想要一次编写，到处使用呢？答案那就是 Web Components，我们一起去看看是什么吧！什么是 web components ？Web Components 是允许我们创建可重用的定制元素（即组件）的一种技术，可以在你喜欢的任何地方重用，不必担心代码冲突，本质就是组件化。由于web components是由w3c组织去推动的，因此它在不久的将来一定成为浏览器的一个标配组件化技术让大家能够快速短时间内掌握这门 Web Components 原生组件化技术，下面的移动端应用就是我们要基于原生组件实现的移动端 WEB 应用，一起来安利一波儿吧 ~~ 
    Vue学习笔记（1）——在页面右上角实现可悬浮/隐藏的系统菜单
    本文自行转载自掘金 本文不能算一个教程，而是记录一只Vue菜鸟踩坑心路历程的笔记，对于正在踩坑的新手或许会有一点小帮助。作为第一篇正经八百的技术博客，欢迎大家发表看法，关爱菜鸟，请轻拍 这是个大多数网站很常见的功能，点击页面右上角头像显示一个悬浮菜单，点击页面其他位置或再次点击头像则菜单隐藏。 作为一个jQuery前端攻城狮实现这个功能可以说是很easy了，但是对只刚粗看了一遍v...
    Python菜鸟快乐游戏编程_pygame
    曾经我也沉迷游戏，连续玩十几个小时竞技游戏可以不吃饭。游戏只是别人写好程序，与其沉迷于他人设计好程序，为何不自己设计游戏，至少学会编程后，我们的月收入上万不是问题。于是便有了录制这部pygame菜鸟游戏编程教程动力。不要沉迷于游戏，我们人生还有许多事情要做，旅游，找到另一个伴侣，成立一个家庭，照顾父母。。。。 编程正在逐步改变世界，程序员不是搬砖的。但传统计算教育程面临枯燥乏味课程，让学生感到乏味。 兴趣是学习最好老师！此课程目的是激发大家对编程兴趣，给广大Python入门初学者带来无穷乐趣。 游戏涉..
    Linux（Ubuntu 14.0）
    开始了Mono的学习。学习了Mono for Android之后，编译一些小的APK，总发现这些APK文件很大，额，真心不知道为什么，那么，就让我们从头开始学期了，Android是基于Linux的，那么我们就从Linux开始了。 本人是个菜鸟，直接从用的Linux的图形界面，因为我实在是接受不了没有图形界面的操作。 我现在安装的是Ubuntu14.0的界面，下载链接：http://www.li...
    菜鸟的Vue-Cli 4.x学习总结
    菜鸟的Vue-Cli 4.x学习总结说明一、入门系列（1）vue-cli安装（2）快速原型开发（3）创建vue-cli项目（4）动态路由（1）路由配置（2）简单路由案例 说明 更新时间：2020/7/16 23:12，更新了整体vue-cli安装、快速原型开发、创建vue-cli项目以及动态路由的（1）（2）点 本文主要基于vue-cli官网进行学习，同时进行一些额外的补充，本文会持续更新，不断地扩充 本文仅为记录学习轨迹，如有侵权,联系删除 注意：本文主要基于vue-cli官网进行学习，地址：https:
    JavaScript

    87,910

    社区成员

    224,616

    社区内容

    发帖
    与我相关
    我的任务
    社区描述
    Web 开发 JavaScript
    社区管理员
    • JavaScript
    • 无·法
    加入社区
    • 近7日
    • 近30日
    • 至今

    加载中

    查看更多榜单
    社区公告
    暂无公告

    试试用AI创作助手写篇文章吧

    + 用AI写文章