<!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. python学习-16 列表list

    list 1.由[ ]括住,中括号内各元素由逗号隔开,各元素可以是数字,字符串,列表,布尔值等等. 例如: li = [521,"love",["john",& ...

  2. 1263: 你会做蛋糕吗？（Java）

    WUSTOJ 1263: 你会做蛋糕吗? 参考博客 Mitsuha_的博客 Description BobLee是个大吃货,喜欢吃好吃的,也喜欢做好吃的.比如做正方形的蛋糕.比如下图这个5*5的蛋糕. ...

  3. Luogu4770 NOI2018你的名字（后缀自动机+线段树合并）

    先考虑l=1,r=n,并且不要求本质不同的情况.对原串建SAM,将询问串在上面跑,得到每个前缀的最长匹配后缀即可得到答案. 然后考虑本质不同.对询问串也建SAM,统计每个节点的贡献,得到该点right ...

  4. Python 的 Mixin 类（转）

    转1:https://www.cnblogs.com/aademeng/articles/7262520.html 转2:https://blog.csdn.net/u010377372/articl ...

  5. 应用人员反馈报错，ORA-03137: TTC protocol internal error : [12333]

    一.报错现象 应用人员反馈连接不上数据库,连接报错. 我们使用PLSQL发现可以连接数据库,但是数据库DB Alert存在如下报错信息 DB AlertFri Oct :: Errors ): ORA ...

  6. Nginx server配置

    项目一般都需要前后端的配置,用二级域名把它区分开:首先在nginx.conf:里面加一句话: http{ #这里面有很多其他的配置 如:gzip FastCGI等等 include vhosts/*. ...

  7. CSPS2019游记

    Day1: T1:格雷码?看一眼感觉是结论题,但是没头绪推不出来,硬刚40min想到$\oplus$切了. 但是没写unsigned挂了五分... T2:全场爆切人均50的题,就我一个写挂了35pts ...

  8. hdu 1203 转换的01包问题。。。。

    俗话说的话 正难则反.,.  这个基本的思想都用不好的话 回家种田去吧. #include<cstdio> #include<string.h> #include<ios ...

  9. 十一、微信小程序-var、let、const用法详解

    let命令 基本用法 ES6 新增了let命令,用来声明变量.它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效. { let a = 10; var b = 1; } a // ...

  10. 第三代PacBio测序技术的测序原理和读长

    针对PacBio单分子测序——第三代测序技术的测序原理和读长     DNA基因测序技术从上世纪70年代起,历经三代技术后,目前已发展成为一项相对成熟的生物产业.测序技术的应用也扩展到了生物.医学.制 ...