<!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 MinGW gcc 编译乱码问题

    问题描述 一般很多编辑器默认都是保存成utf-8文件,然而在输出中文的时候出现了乱码?另外试了其他方法,有的乱码,有的不乱? MinGW gcc 编译 utf-8 文件的时候乱码 MinGW gcc ...

  2. 利用Python进行数据分析_Numpy_基础_3

    通用函数:快速的元素级数组函数 通用函数,是指对数组中的数据执行元素级运算的函数:接受一个或多个标量值,并产生一个或多个标量值. sqrt 求平方根 np.sqrt(arr) exp 计算各元素指数 ...

  3. 利用Python进行数据分析_Numpy_基础_2

      Numpy数据类型包括: int8.uint8.int16.uint16.int32.uint32.int64.uint64.float16.float32.float64.float128.co ...

  4. MongoDB进阶之路：不仅仅是技术研究，还有优化和最佳实践--转载

    摘要:MongoDB是一个基于分布式文件存储的数据库.由C++语言编写.旨在为WEB应用提供可扩展的高性能数据存储解决方案. 本文将从操作手册.技术研究.会议分享.场景应用等几个方面给大家推荐干货好文 ...

  5. （七）装配Bean（1）

    针对给接口提供哪一个具体的实现,也就是装配哪一种具体的实现bean,在Spring中提供了多种方式,主要包括3种: 一.隐式的bean发现机制和自动装配(自动化装配bean) 二.在Java类中进行显 ...

  6. C#使用Selenium网页自动化

    工作中很多时候经常需要网抓数据或者把数据填写到网站上,使用Selenium将其自动化是一种不错的选择.Selenium其实是一个用于Web应用程序测试的工具,测试你的应用程序看是否能够很好地工作在不同 ...

  7. javascript的装载和执行

    前言 为什么要采用js来create一个script标签,设置src然后append到head中,而不是直接使用script标签,这样不是更简单点吗? javascript的装载和执行 首先,我想说一 ...

  8. ConfigParser读取配置文件时报错：ConfigParser.MissingSectionHeaderError

    使用ConfigParser来读取配置文件,经常会发现经过记事本.notepad++修改后的配置文件读取时出现下面的问题: ConfigParser.MissingSectionHeaderError ...

  9. nodejs入门API之url模块+querystring模块

    关于URL的一些基础内容 URL模块的API解析 URL的参数URLSearchParams类 querystring模块 一.关于URL的一些基础内容 1.1 定义: 在WWW上,每一信息资源都有统 ...

  10. 【Distributed】分布式任务调度平台

    一.概述 什么是定时任务 二.Java实现定时任务方式 2.1 Thread 2.2 TimerTask 2.3 ScheduledExecutorService 2.4 Quartz 引入maven ...