<!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);
}