<!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. 【C语言入门教程】2.9 小结

    本章介绍 C 语言的基本组成部分,数据类型.运算符 和 表达式 构成了 C 语言的语法,熟悉和掌握这些信息是学习 C 语言的必经之路.C 语言具备严谨的语法结构,任何细微的差错可导致程序无法通过编译, ...

  2. 【python网络编程】新浪爬虫：关键词搜索爬取微博数据

    上学期参加了一个大数据比赛,需要抓取大量数据,于是我从新浪微博下手,本来准备使用新浪的API的,无奈新浪并没有开放关键字搜索的API,所以只能用爬虫来获取了.幸运的是,新浪提供了一个高级搜索功能,为我 ...

  3. 小心一些，断言可能让你的造成循环引用NSAssert

    block和self的相互引用造成的循环引用,想必大家都是明白的.上下面的代码(截取部分) __weak typeof(self) weakSelf = self; self.jsBridgeFunc ...

  4. Redis Windows下安装部署

    下载Redis 在Redis的官网下载页上有各种各样的版本,我这次是在windows上部署的,要去GitHub上下载.我下载的是2.8.12版的,相信大家百度一下就可以搜到,这就是我们需要的: 启动R ...

  5. Android 软键盘盖住输入框的问题

    当在Android的layout设计里面如果输入框过多,则在输入弹出软键盘的时候,下面的输入框会有一部分被软件盘挡住,从而不能获取焦点输入. 解决办法: 方法一:在你的activity中的oncrea ...

  6. iOS权限管理思路

    iOS权限的分类: 1.功能级权限管理 2.数据级权限管理 权限的获取方式: 通常通过网络获取,会有延迟 使用到权限的场景: 1. 点击发送会员专享魔法表情,  判断是否有发送会员专享魔法表情的权限, ...

  7. 跟着百度学PHP[3]-PHP中结构嵌套之循环结构与条件结构嵌套

    任务 有个学生数组存储了学号和姓名,我们需要查找学号为"2014"的学生姓名,这时候我们就需要遍历该数组,并判定学号是否为"201 <?php $student = ...

  8. 9.5---括号是否有效（CC150）

    leetcode原题: char temp ; Stack<Character> stack = new Stack<Character>();//error:Stack< ...

  9. python traceback 变量值

    import sys import traceback import cgitb def handleException(excType, excValue, trace): print 'error ...

  10. Maven学习总结

    转载至:http://www.cnblogs.com/xdp-gacl/p/3498271.html 一 入门 一.Maven的基本概念 Maven(翻译为"专家","内 ...