<!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. 一张图告诉你，只会JavaScript还不够！

    会了JavaScript语法,你就真的会了JavaScript吗,来看这张图!是超实用的JavaScript代码段一书的导览!熊孩子们,赶紧学习去吧!

  2. CodeForces 55D Beautiful numbers

    D. Beautiful numbers time limit per test 4 seconds memory limit per test 256 megabytes input standar ...

  3. C#利用Web Service实现短信发送（转）

    通过编程方式实现短信息的发送对很多人来说是一件比较烦杂的事情,目前一般的解决方法是通过计算机和手机的连线,通过可对手机编程的语言编写相关的手机短信息程序来实现,而这种方法对于一般人来说是很难达到的,因 ...

  4. BPMN流程图的绘制的注意要点

    1.分支网关的表达式,是在选择的线上设置. 2.在分支网关上,可以设置一个默认线的id. 3.并行网关,必须有开始,有结束.

  5. CSU 1113 Updating a Dictionary（map容器应用）

    题目链接:http://acm.csu.edu.cn/OnlineJudge/problem.php?id=1113 解题报告:输入两个字符串,第一个是原来的字典,第二个是新字典,字典中的元素的格式为 ...

  6. Codeforces 260 A - A. Laptops

    题目链接:http://codeforces.com/contest/456/problem/A 解题报告:有n种电脑,给出每台电脑的价格和质量,要你判断出有没有一种电脑的价格小于另一种电脑但质量却大 ...

  7. iOS开发——网络篇——UIWebview基本使用，NSInvocation(封装类)，NSMethodSignature（签名），JavaScript，抛异常，消除警告

    一.UIWebView简介 1.UIWebView什么是UIWebViewUIWebView是iOS内置的浏览器控件系统自带的Safari浏览器就是通过UIWebView实现的 UIWebView不但 ...

  8. [codevs1029]遍历问题

    [codevs1029]遍历问题 试题描述 我们都很熟悉二叉树的前序.中序.后序遍历,在数据结构中常提出这样的问题:已知一棵二叉树的前序和中序遍历,求它的后序遍历,相应的,已知一棵二叉树的后序遍历和中 ...

  9. oracle with as 用法

    http://blog.itpub.net/28371090/viewspace-1190141/

  10. H5canvas赛车游戏-基于lufylegend引擎

    lufylegend引擎是canvas游戏中,比较简单的引擎之一,它不需要配置环境,类似引入jquery包的方式,引用对应js文件即可 lufylegend官方网站:http://www.lufyle ...