<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>radio语法笔记</title>

 </head>

 <body>

     <button class="btn-play">播放</button>

     <button class="btn-pause">暂停</button>

     <button class="btn-gogo">快进</button>

     <button class="btn-back">快退</button>

     <button class="btn-volumeAdd">音量+</button>

     <button class="btn-volumeMin">音量-</button>

     <span class="newTime"></span>

     <span class="allTime"></span>

     <script>

         audio = new Audio();

         audio.src = "data/imooc.mp3";

         var btnAudio = document.querySelector('.btn-play');

         var btnPause = document.querySelector('.btn-pause');

         btnAudio.onclick = function(){

             audio.play();

         }

         btnPause.onclick = function(){

             audio.pause();

         }

         var newTime = document.querySelector('.newTime');

         var allTime = document.querySelector('.allTime');

         audio.addEventListener('canplay',function(){

             allTime.innerHTML = audio.duration;

         })

         setInterval(function(){

             newTime.innerHTML = parseInt(audio.currentTime);

         },1000);

         var  gogo = document.querySelector('.btn-gogo');

         gogo.onclick = function(){

             audio.currentTime += 20;

         }

         var  back = document.querySelector('.btn-back');

         back.onclick = function(){

             audio.currentTime -= 20;

         }

         var volumeAdd = document.querySelector('.btn-volumeAdd');

         var volumeMin = document.querySelector('.btn-volumeMin');

         //点击按钮加减音频音量到最小会出现bug什么意思？？？

         volumeAdd.onclick = function(){

             audio.volume >= 1 ? audio.volume = 1 : audio.volume = audio.volume + .1;

             console.log(audio.volume);

         }

         volumeMin.onclick = function(){

             audio.volume <= 0 ? audio.volume = 0 : audio.volume = audio.volume - .1;

             console.log(audio.volume);

         }

     </script>

 </body>

 </html>

//点击按钮加减音频音量到最小会出现bug什么意思？？？的更多相关文章

  1. jquery制作图片瀑布流点击按钮加载更多内容

    <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script> ...

  2. 给页面点击链接加了转圈圈和解决遇到的bug

    今天遇到一个问题,之前给整个网站上的链接加了loading,今天遇到在ios的chrome和safari下点击进入新页面然后点击浏览器的返回按钮,loading还在,并且一直存在,最后网上搜到了解决方 ...

  3. EasyUI系列—点击按钮加载tabs_day26

    我们先来看下效果图 1.为div添加点击事件(也可使用jQuery绑定事件) 1 <div id="mm2" style="width:100px;"&g ...

  4. html ajax请求 php 下拉 加载更多数据 （也可点击按钮加载更多）

    <input type="hidden" class="total_num" id="total" value="{$tot ...

  5. primefaces 查询 点击按钮 加载 动画 ajax loader

    只要在/WEB-INF/template.xhtml中body 里面加入: <ui:insert name="status"> <p:ajaxStatus sty ...

  6. jQuery数字加减插件

    jQuery数字加减插件 我们在网上购物提交订单时,在网页上一般会有一个选择数量的控件,要求买家选择购买商品的件数,开发者会把该控件做成可以通过点击实现加减等微调操作,当然也可以直接输入数字件数.本文 ...

  7. 购物车数字加减按钮HTML+CSS+JS（有需要嫌麻烦的小伙伴拿走不谢）

    之前在写详情页的时候,如下图 因为自己嫌麻烦,就去看其他网站是怎么写的,想直接拿来用,后来看来看去觉得写得很麻烦,于是最后还是决定自己写,附上HTML+CSS+JS代码,一条龙一站式贴心服务2333 ...

  8. [置顶] Android系统移植与调试之------->如何修改Android设备状态条上音量加减键在横竖屏的时候的切换与显示

    这两天由于一个客户的要求,将MID竖屏时候的状态条上的音量键去掉.所以尝试修改了一下,成功了,分享一下经验. 先看一下修改后的效果图,如下所示 . 横屏的时候:有音量加减键 竖屏的时候:音量加减键被去 ...

  9. Vue(小案例_vue+axios仿手机app)_购物车（二模拟淘宝购物车页面，点击加减做出相应变化）

    一.前言 在上篇购物车中,如果用户刷新了当前的页面,底部导航中的数据又会恢复为原来的: 1.解决刷新,购物车上数值不变                                         ...

随机推荐

  1. # VsCode 配置C++调试运行

    VsCode 配置C++调试运行 打开命令面板快捷键为F1,软件上写的Ctrl+Shift+P似乎没用 先安装插件使得可以运行 先自行在vsc扩展中搜索C++安装C/C++插件 再参考知乎专栏中安装c ...

  2. c++设计原则：继承与组合

    “优先使用对象组合,而不是继承”是面向对象设计的原则之一. 组合也叫“对象持有”,就是在类中定义另一类型的成员,继承会破坏类的独立性,增加系统的复杂性,一般系统的继承层次不超过3层.组合拥有良好的扩展 ...

  3. web&http协议&django初识

    1.什么是web应用 ​ Web应用程序是一种可以通过Web访问的应用程序,程序的最大好处是用户很容易访问应用程序,用户只需要有浏览器即可,不需要再安装其他软件. ​ 应用程序有两种模式C/S.B/S ...

  4. HTML中关于动态创建的标签无法绑定js事件的解决方法：.on()方法的 [.selector]

    在前端页面的时候,会经常遇到用JavaScript动态创建出来的Button按钮或其他标签无法使用点击事件的问题.如下代码,使用jquery在body中动态创建一个class为demo的Button按 ...

  5. （四）Hibernate的增删改查操作（1）

    Hiberntae的查找操作有多种: 1.  使用Criteria接口查询 Query_Criteria.java package action; import java.util.ArrayList ...

  6. linux命令启动关闭firewalld防火墙，添加端口

    firewalld管理防火墙常用命令   1.查看防火墙的状态 [root@localhost HMK]# firewall-cmd --state 查看防火墙的运行状态 not running [r ...

  7. tornado 常见问题处理

    1 怎么获取从页面中的传值 使用 self.get_body_argument tornado的参数存储在self.request.body内,通过json以后就可以直接取值,当初我在前端使用angu ...

  8. logstash+elasticsearch+kibana搭建日志收集分析系统

    来源: http://blog.csdn.net/xifeijian/article/details/50829617 日志监控和分析在保障业务稳定运行时,起到了很重要的作用,不过一般情况下日志都分散 ...

  9. c# 执行调用Oracle Procedure传参及回传值

    ////定義參數               //IDataParameter[] parameters =               //             {               ...

  10. mybatis逆向工程(eclipse版本)

    1. 新建maven项目, 目录结构 2. src/main/resources中新建generatorConfig.xml <?xml version="1.0" enco ...