<!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. Django路由配置

    Django路由配置系统.视图函数 1.路由配置系统(URLconf) URL配置(URLconf)就像Django 所支撑网站的目录.它的本质是URL与要为该URL调用的视图函数之间的映射表:你就是 ...

  2. WUSTOJ 1285: Factors（Java）

    1285: Factors 参考   hadis_fukan的博客--wustoj 1285 Factors 题目   输入一个数n,找出1~n之间(包括1,n)的质因子最多的数(x)的质因子个数(f ...

  3. 1264: 祈雨（Java）

    WUSTOJ 1264: 祈雨 Description 在持续了X天的干旱之后,ACM俱乐部决定由LCM去请求雨大师XH祈雨,CMS则准备工具收集雨水,由于ACM俱乐部中有一个逆天的存在,BobLee ...

  4. SpringBoot 第二篇：SpringBoot配置文件使用

    背景 项目跑起来,和以前相比,现在的配置文件能干什么?SpringBoot 项目的配置文件就是创建项目时,自带的 application.properties ,打开里面空空如也.这个文件里面的语法是 ...

  5. php 获取某个月的周一

    今天有个朋友问了一个问题,最后解决了下,先整理记下来,后面用到了再说 function getMonday($month = ''){ if(empty($month)){ $month = date ...

  6. hdu 2089 入手数位dp问题

    数位dp解决的问题是指求在一段数的区间里面 满足条件的数的个数 核心为两点 http://wenku.baidu.com/link?url=tpfIYzhx_MzevpIM58UZ66pr-87MCF ...

  7. kong网关命令（一）

    上次在虚拟机里安装kong网关后,因为版本(1.4)太高,目前Kong Dashboard无法支持, 后续发现Git上有个开源工具Kong admin ui,下载源码并部署到NGINX. 但是发现使用 ...

  8. ElementUI 复杂顶部和左侧导航栏实现

    描述:如图 项目路径如下图所示: 代码实现: 首先在store.js中添加两个状态: import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vue ...

  9. node - path路径

    1.node命令路径与js文件路径 node命令路径为node命令所执行的目录,js文件路径指的是你要运行的js所在的目录. 如上图所示: server.js路径为E:\zyp: node命令路径我们 ...

  10. reduce方法的使用

    reduce(收敛):接收一个回调函数作为累加器,数组中的每个值(从左到右)开始缩减,最终为一个值,是ES5中新增的又一个数组逐项处理方法. reduce(callback,initialValue) ...