<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width; initial-scale=1.0">

<title>演示：使用按钮控制HTML5背景音乐开关</title>

</head>

<body>

    <div id="main">

        <div style="width:36px; height:36px;float:right;position:absolute;z-index:13;top:5px;right:5px;">

        <audio id="music" src="../addons/shd_xb/template/style/mp3/back.mp3"  loop="loop">你的浏览器不支持audio标签。</audio>

        <a id="audio_btn"><img src="../addons/shd_xb/template/style/image/play.png"   id="music_btn" border="" ></a>

   </div>

    </div>

    <script type="text/javascript"

        src="http://libs.useso.com/js/jquery/1.7.2/jquery.min.js"></script>

    <script>

        $("#audio_btn").click(function() {

            var music = document.getElementById("music");

            if (music.paused) {

                music.play();

                $("#music_btn").attr("src", "play.gif");

            } else {

                music.pause();

                $("#music_btn").attr("src", "pause.gif");

            }

        });

        function playPause() {

            var music = document.getElementById('music2');

            var music_btn = document.getElementById('music_btn2');

            if (music.paused) {

                music.play();

                music_btn.src = 'play.gif';

            } else {

                music.pause();

                music_btn.src = 'pause.gif';

            }

        }

    </script>

</body>

</html>

使用按钮控制HTML5背景音乐开关的更多相关文章

  1. 31.JS实现控制HTML5背景音乐播放暂停

    实现控制网站背景音乐的播放暂停在html5中是非常容易和简单的,仅仅几行代码即可实现.首先在网页中嵌入背景音乐,html5代码为: <script src="http://wuover ...

  2. jquery 文字滚动大全 scroll 支持文字或图片 单行滚动 多行滚动 带按钮控制滚动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. HTML5背景知识

    目录 HTML5背景知识 HTML的历史 JavaScript出场 浏览器战争的结束 插件称雄 语义HTML浮出水面 发展态势:HTML标准滞后于其使用 HTML5简介 新标准 引入原生多媒体支持 引 ...

  4. jquery图片滚动仿QQ商城带左右按钮控制焦点图片切换滚动

    jquery图片滚动仿QQ商城带左右按钮控制焦点图片切换滚动 http://www.17sucai.com/pins/demoshow/382

  5. Micropython Turnipbit 换挡风扇 旋转按钮控制直流电机转速

    学过物理学的我们都知道换挡风扇的原理,一般按钮控制电感分压或者电容分压,以达到控制电流的目的.那么我们可不可以使用Turnipbit模拟这个系统呢?其实是很简单的.类似于之前用Tpyboard做的智能 ...

  6. 基于html5背景图片自适应代码

    基于html5背景图片自适应代码是一款背景不随滚动条滚动,会根据分辨率不同自动匹配对应的背景图片.效果图如下: 在线预览   源码下载 实现的代码. css代码: .jawbone-hero .jaw ...

  7. 人体感应模块控制LCD1602背景灯是否开启

    /* Web client This sketch connects to a website (http://www.google.com) using an Arduino Wiznet Ethe ...

  8. csu 1770按钮控制彩灯实验(树状数组)

    1770: 按钮控制彩灯实验 Time Limit: 1 Sec  Memory Limit: 128 MBSubmit: 194  Solved: 65[Submit][Status][Web Bo ...

  9. SAM4E单片机之旅——6、LED闪烁之按钮控制

    现在试试用按钮控制LED灯……让LED在一个按钮按下时亮起:弹起时灭掉. 主要目的是学习GPIO的输入及中断. 一. 电路 图中的J39-n是几个跳线插座,位置在开发板LCD附近,往下进行前要先确保跳 ...

随机推荐

  1. CentOS启用sudo，禁用root远程登录

    CentOS默认不启用sudo,且可以直接用超级管理员身份登录服务器.ubuntu这方面做得比较好,为了安全,减小误操作带来的损失,还是推荐启用sudo. 1.添加sudo用户 执行 visudo 命 ...

  2. java 1.7

    http://superuser.com/questions/740064/how-to-install-java-1-7-runtime-on-macos-10-9-mavericks sudo r ...

  3. java之BASE64加解密

    1.简介 Base64是网络上最常见的用于传输8Bit字节代码的编码方式之一,采用Base64编码具有不可读性,即所编码的数据不会被人用肉眼所直接看到. 注:位于jdk的java.util包中. 2. ...

  4. ORACLE 数据库建了非法表后无法操作和删除问题

    问题描述: oracle 用PL/SQL DEVELOPER 可视化建表时,表名没有按照规范,建立一个非法格式的表 ICD-10th-Version (中间有横杆,非法).但是不知道怎么回事却建成功了 ...

  5. [Asp.net MVC]Asp.net MVC5系列——第一个项目

    目录 概述 创建第一个项目 添加控制器 总结 概述 本教程是个人一步一步学习的总结,希望能帮到正在进入ASP.Net MVC5方向的朋友,个人也是准备进入ASP.NET MVC5领域,虽然艰辛,但是乐 ...

  6. HTML5的新特性及技巧分享总结

    原文链接:http://www.aseoe.com/show-10-645-1.html?utm_source=tuicool&utm_medium=referral 1. 新的Doctype ...

  7. android中返回键捕获处理

    在android平台上捕获Back键事件,主要用来处理返回的相关逻辑,下列几种方法都可以捕获,如下所示: 1.获取按钮按下事件,兼容android 1.0到android 2.1,重写onKeyDow ...

  8. GFF3格式

    GFF3是GFF注释文件的新标准.文件中每一行为基因组的一个属性,分为9列,以TAB分开. 依次是: 1. reference sequence:参照序列 指出注释的对象.如一个染色体,克隆或片段.可 ...

  9. 二分图------》Hopcroft-Karp算法 hdu2389

    Hopcroft-Karp算法 该算法由John.E.Hopcroft和Richard M.Karp于1973提出,故称Hopcroft-Karp算法. 原理 为了降低时间复杂度,可以在增广匹配集合M ...

  10. apscheduler 绿色版

    由于依赖EntryPoint,因此apscheduler在离线的方式(直接拷贝然后引用)使用时,会报错. 错误信息类似: No trigger by the name “interval/cron/d ...