<!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. windows自动化测试 （python）

    装插件 pywinauto 命令 pip install --upgrade pywinauto   最简单的一个例子,中文环境下   from pywinauto.application impor ...

  2. 机器学习-svd实现人脸识别

    加载sklearn中的人脸数据集 from sklearn.datasets import fetch_lfw_people faces = fetch_lfw_people() 执行上面的第二行程序 ...

  3. Python操作Redis（转）

    原文1:https://cloud.tencent.com/developer/article/1151834 原文2:https://www.cnblogs.com/zhaohuhu/p/91406 ...

  4. （八）Activiti之流程变量和局部流程变量

    一.流程变量 1.1 概念 如果,当流程走到"学生请假"这个任务节点的时候,此时可以用TaskService设置流程变量,变量值包含请假人.请假时间.请假理由等信息,这些信息存在表 ...

  5. Linux命令（1）grep

    开发过程中,与测试运维中 逐渐学习 运维常用的Linux 命令: 转自https://www.cnblogs.com/peida/archive/2012/12/17/2821195.html Lin ...

  6. Mysql 中删除重复数据（保留一条）

    sql去重 先根据需要去重的字段进行分组,取到主键值最小的记录(id 是主键,删除重复的 record_id 的记录) select min(id) from tb_traffic_wf_record ...

  7. StringBuilder 去除最后一个多余的字符的方法

    public class StringBuilterTest { public static void main(String[] args) { //新增一个map Map<String, S ...

  8. Oracle学习笔记：update的字段中包括单引号

    平时update的时候直接更改字段内的值,例如: update table_temp set name = 'Hider' where id = 100; 但更新后的值中包括单引号,则不能按以上方式进 ...

  9. Servlet实现图片读取显示

    1.导入jar包:commons-io-1.4.jar 2.index.jsp: <%@ page language="java" import="java.uti ...

  10. c#重写了窗体的OnKeyDown事件，但是不执行

    设置下窗体的KeyPreview属性值为True即可 总结:遇到类似这样的问题,比如其他窗体运行没问题,就新建的窗体有问题.应该检查下窗体的属性.