zoukankan      html  css  js  c++  java
  • 添加背景音乐由icon控制

    标准按钮icons样式:

    http://fontawesome.io/icons/

    使用icons时在head头文件中添加如下link即可以使用,不需要引入什么插件:

    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">



    <!--添加音乐播放器代码如下-->
    <div  style="padding: 2em;TEXT-ALIGN: center;">
        <audio id="myaudio" src="${path}/music/Jason Mraz - I'm Yours.mp3"  loop="false" hidden="true"  ></audio>
        
        <a id="playBtn" href="javascript:void(0)" onclick="autoPlay()"><i class="fa fa-play fa-2x"></i></a>
        <a id="stopBtn" href="javascript:void(0)" onclick="autoStop()" style="display: none"><i class="fa fa-pause fa-2x"></i></a>
    </div>

    <script language="javascript" type="text/javascript">
    function autoPlay(){
        var myAuto = document.getElementById('myaudio');
        myAuto.play();
        
        document.getElementById('playBtn').style.display = "none";
        document.getElementById('stopBtn').style.display = "";
    }

    function autoStop(){
        var myAuto = document.getElementById('myaudio');
        myAuto.pause();// 不是stop()
        
        document.getElementById('playBtn').style.display = "";
        document.getElementById('stopBtn').style.display = "none";
    }
    </script>

  • 相关阅读:
    python爬取图片
    IDEA创建SpringBoot项目报错,不能连接https://start.spring.io/
    ES模块化的理解
    Web标准(网站标准)理解
    Mongodb安装
    Linux Ntp时间同步服务
    SentinelResource 注解
    Sentinel的流量控制
    Sentinel简介
    nacos安装
  • 原文地址:https://www.cnblogs.com/msr1019jingzi/p/3820989.html
Copyright © 2011-2022 走看看