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

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>radio语法笔记</title>
 6 </head>
 7 <body>
 8     <button class="btn-play">播放</button>
 9     <button class="btn-pause">暂停</button>
10     <button class="btn-gogo">快进</button>
11     <button class="btn-back">快退</button>
12     <button class="btn-volumeAdd">音量+</button>
13     <button class="btn-volumeMin">音量-</button>
14     <span class="newTime"></span>
15     <span class="allTime"></span>
16     <script>
17         audio = new Audio();
18         audio.src = "data/imooc.mp3";
19         var btnAudio = document.querySelector('.btn-play');
20         var btnPause = document.querySelector('.btn-pause');
21         btnAudio.onclick = function(){
22             audio.play();
23         }
24         btnPause.onclick = function(){
25             audio.pause();
26         }
27         var newTime = document.querySelector('.newTime');
28         var allTime = document.querySelector('.allTime');
29         audio.addEventListener('canplay',function(){
30             allTime.innerHTML = audio.duration;
31         })
32         setInterval(function(){
33             newTime.innerHTML = parseInt(audio.currentTime);
34         },1000);
35 
36         var  gogo = document.querySelector('.btn-gogo');
37         gogo.onclick = function(){
38             audio.currentTime += 20;
39         }
40 
41         var  back = document.querySelector('.btn-back');
42         back.onclick = function(){
43             audio.currentTime -= 20;
44         }
45 
46         var volumeAdd = document.querySelector('.btn-volumeAdd');
47         var volumeMin = document.querySelector('.btn-volumeMin');
48         //点击按钮加减音频音量到最小会出现bug什么意思？？？
49         volumeAdd.onclick = function(){
50             audio.volume >= 1 ? audio.volume = 1 : audio.volume = audio.volume + .1;
51             console.log(audio.volume);
52         }
53         volumeMin.onclick = function(){
54             audio.volume <= 0 ? audio.volume = 0 : audio.volume = audio.volume - .1;
55             console.log(audio.volume);
56         }
57     </script>
58 </body>
59 </html>

 

posted @ 2019-07-24 10:09  最好的安排  阅读(272)  评论(0)    收藏  举报

Knowledge is infinite