音乐播放和播放条

346 阅读1分钟
 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
     <style>
    * {
        margin: 0;
        padding: 0;
    }

    .container {
        height: 10px;
        width: 400px;
        background: #666;
        margin: 100px;
        overflow: hidden;
        border-radius: 5px;
    }
    .play_btn {
        width: 100px;
        height: 100px;
        font-size: 14px;
        text-align: center;
        cursor: pointer;
        background: orangered;
        color: #fff;
        line-height: 100px;
        border-radius: 50%;
        box-shadow: 2px 2px 5px #ccc;
    }
    .progress {
        border-radius: 5px;
        background: red;
        width: 0%;
        height: 100%;
    }
</style>
  </head>
  <body>
  <audio id="player" src="./mp3/demo.mp3"></audio>
   <div class="play_btn">播放</div>
   <div id="time"></div>

  <div class="container">
    <div class="progress"></div>
   </div>
   <script src="../simba.js"></script>
   <script>
    function $(selector) {
        return document.querySelector(selector)
    }
    let progress = $('.progress')
    let player = $('#player')
    $('.play_btn').onclick = function () {
        if (this.innerHTML === '播放') {
            player.play()
            this.innerHTML = '暂停'
        } else {
            player.pause()
            this.innerHTML = '播放'
        }
    }

    let timer = setInterval(() => {
        let str = _.convertSec2Str(player.currentTime) + "/" + _.convertSec2Str(player.duration)
        $('#time').innerHTML = str
        progress.style.width = (player.currentTime * 100 / player.duration) + '%'
    }, 500);
   </script>
 </body>
 </html>

播放的div两端有空格导致可以打印1,但是不走if循环。代码尽量不要留空格

 <div class="play_btn">
       播放
 </div>
 <audio id="player" src="./demo.mp3"></audio>

js部分  
  $('.play_btn').onclick = function () {  
if(this.innerHTML==='播放'){  
  player.play()  
  this.innerHTML='暂停'  
  }else{  
  player.pause()  
  this.innerHTML='播放'  
  }  
  console.log(1);  
  }