html
<!-- 翻转效果 -->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div class="wrap" id="wrap">
<div class="list">
<div class="item">
<svg>
<circle class="circle" cx="42" cy="40" r="34" transform="rotate(-90 80 80)"></circle>
</svg>
<text x="80" y="85" fill="#6b778c" text-anchor="middle" class="text-content">
<tspan class="text">0</tspan><tspan class="percent">%</tspan>
</text>
<audio data-play="false" id="audio" src="./test.m4a"></audio>
<div id="action" class="audio-status"></div>
</div>
<div class="item">
<svg>
<circle class="circle" cx="42" cy="40" r="34" transform="rotate(-90 80 80)"></circle>
</svg>
<text x="80" y="85" fill="#6b778c" text-anchor="middle" class="text-content">
<tspan class="text">0</tspan><tspan class="percent">%</tspan>
</text>
<audio data-play="false" id="audio" src="./test.m4a"></audio>
<div id="action" class="audio-status"></div>
</div>
<div class="item">
<svg>
<circle class="circle" cx="42" cy="40" r="34" transform="rotate(-90 80 80)"></circle>
</svg>
<text x="80" y="85" fill="#6b778c" text-anchor="middle" class="text-content">
<tspan class="text">0</tspan><tspan class="percent">%</tspan>
</text>
<audio data-play="false" id="audio" src="./test.m4a"></audio>
<div id="action" class="audio-status"></div>
</div>
<div class="item">
<svg>
<circle class="circle" cx="42" cy="40" r="34" transform="rotate(-90 80 80)"></circle>
</svg>
<text x="80" y="85" fill="#6b778c" text-anchor="middle" class="text-content">
<tspan class="text">0</tspan><tspan class="percent">%</tspan>
</text>
<audio data-play="false" id="audio" src="./test.m4a"></audio>
<div id="action" class="audio-status"></div>
</div>
<div class="item">
<svg>
<circle class="circle" cx="42" cy="40" r="34" transform="rotate(-90 80 80)"></circle>
</svg>
<text x="80" y="85" fill="#6b778c" text-anchor="middle" class="text-content">
<tspan class="text">0</tspan><tspan class="percent">%</tspan>
</text>
<audio data-play="false" id="audio" src="./test.m4a"></audio>
<div id="action" class="audio-status"></div>
</div>
<div class="item">
<svg>
<circle class="circle" cx="42" cy="40" r="34" transform="rotate(-90 80 80)"></circle>
</svg>
<text x="80" y="85" fill="#6b778c" text-anchor="middle" class="text-content">
<tspan class="text">0</tspan><tspan class="percent">%</tspan>
</text>
<audio data-play="false" id="audio" src="./test.m4a"></audio>
<div id="action" class="audio-status"></div>
</div>
<div class="item">
<svg>
<circle class="circle" cx="42" cy="40" r="34" transform="rotate(-90 80 80)"></circle>
</svg>
<text x="80" y="85" fill="#6b778c" text-anchor="middle" class="text-content">
<tspan class="text">0</tspan><tspan class="percent">%</tspan>
</text>
<audio data-play="false" id="audio" src="./test.m4a"></audio>
<div id="action" class="audio-status"></div>
</div>
<div class="item">
<svg>
<circle class="circle" cx="42" cy="40" r="34" transform="rotate(-90 80 80)"></circle>
</svg>
<text x="80" y="85" fill="#6b778c" text-anchor="middle" class="text-content">
<tspan class="text">0</tspan><tspan class="percent">%</tspan>
</text>
<audio data-play="false" id="audio" src="./test.m4a"></audio>
<div id="action" class="audio-status"></div>
</div>
</div>
<div class="back-list">
<div class="back-item">
<svg>
<circle class="circle" cx="42" cy="40" r="34" transform="rotate(-90 80 80)"></circle>
</svg>
<text x="80" y="85" fill="#6b778c" text-anchor="middle" class="text-content">
<tspan class="text">0</tspan><tspan class="percent">%</tspan>
</text>
<audio data-play="false" id="audio" src="./test.m4a"></audio>
<div id="action" class="audio-status"></div>
</div>
<div class="back-item">
<svg>
<circle class="circle" cx="42" cy="40" r="34" transform="rotate(-90 80 80)"></circle>
</svg>
<text x="80" y="85" fill="#6b778c" text-anchor="middle" class="text-content">
<tspan class="text">0</tspan><tspan class="percent">%</tspan>
</text>
<audio data-play="false" id="audio" src="./test.m4a"></audio>
<div id="action" class="audio-status"></div>
</div>
<div class="back-item">
<svg>
<circle class="circle" cx="42" cy="40" r="34" transform="rotate(-90 80 80)"></circle>
</svg>
<text x="80" y="85" fill="#6b778c" text-anchor="middle" class="text-content">
<tspan class="text">0</tspan><tspan class="percent">%</tspan>
</text>
<audio data-play="false" id="audio" src="./test.m4a"></audio>
<div id="action" class="audio-status"></div>
</div>
<div class="back-item">
<svg>
<circle class="circle" cx="42" cy="40" r="34" transform="rotate(-90 80 80)"></circle>
</svg>
<text x="80" y="85" fill="#6b778c" text-anchor="middle" class="text-content">
<tspan class="text">0</tspan><tspan class="percent">%</tspan>
</text>
<audio data-play="false" id="audio" src="./test.m4a"></audio>
<div id="action" class="audio-status"></div>
</div>
<div class="back-item">
<svg>
<circle class="circle" cx="42" cy="40" r="34" transform="rotate(-90 80 80)"></circle>
</svg>
<text x="80" y="85" fill="#6b778c" text-anchor="middle" class="text-content">
<tspan class="text">0</tspan><tspan class="percent">%</tspan>
</text>
<audio data-play="false" id="audio" src="./test.m4a"></audio>
<div id="action" class="audio-status"></div>
</div>
<div class="back-item">
<svg>
<circle class="circle" cx="42" cy="40" r="34" transform="rotate(-90 80 80)"></circle>
</svg>
<text x="80" y="85" fill="#6b778c" text-anchor="middle" class="text-content">
<tspan class="text">0</tspan><tspan class="percent">%</tspan>
</text>
<audio data-play="false" id="audio" src="./test.m4a"></audio>
<div id="action" class="audio-status"></div>
</div>
<div class="back-item">
<svg>
<circle class="circle" cx="42" cy="40" r="34" transform="rotate(-90 80 80)"></circle>
</svg>
<text x="80" y="85" fill="#6b778c" text-anchor="middle" class="text-content">
<tspan class="text">0</tspan><tspan class="percent">%</tspan>
</text>
<audio data-play="false" id="audio" src="./test.m4a"></audio>
<div id="action" class="audio-status"></div>
</div>
<div class="back-item">
<svg>
<circle class="circle" cx="42" cy="40" r="34" transform="rotate(-90 80 80)"></circle>
</svg>
<text x="80" y="85" fill="#6b778c" text-anchor="middle" class="text-content">
<tspan class="text">0</tspan><tspan class="percent">%</tspan>
</text>
<audio data-play="false" id="audio" src="./test.m4a"></audio>
<div id="action" class="audio-status"></div>
</div>
</div>
</div>
<button id="filp">翻转效果</button>
</body>
<style>
body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.wrap {
width: 100%;
height: 764px;
transform-style: preserve-3d;
transition: 1s;
}
.list {
width: calc(100% - 40px);
padding: 8px 20px 8px;
background-color: #ffb6b9;
position: absolute;
left: 0;
top: 0;
backface-visibility: hidden;
}
.item {
width: 100%;
height: 80px;
margin: 12px 0;
background-color: #fae3d9;
position: relative;
}
.back-list {
width: calc(100% - 40px);
padding: 8px 20px 8px;
background-color: #8ac6d1;
position: absolute;
left: 0;
top: 0;
transform: rotateX(180deg);
backface-visibility: hidden;
}
.back-item {
width: 100%;
height: 80px;
margin: 12px 0;
background-color: #bbded6;
position: relative;
}
button {
background-color: #409eff;
color: #fff;
width: calc(100% - 40px);
border: none;
height: 64px;
width: 100%;
position: absolute;
bottom: 0;
}
.circle {
fill: none;
stroke: #f26b1f;
stroke-width: 8;
stroke-dasharray: 213.5;
stroke-dashoffset: 213.5;
transform: rotate(-90deg);
transform-origin: center;
transform-box: fill-box;
transition: all 0.1s;
}
.text-content {
position: absolute;
top: 30px;
left: 100px;
}
.text {
font-size: 20px;
}
.percent {
font-size: 10px;
}
.audio-status {
position: absolute;
top: 8px;
left: 10px;
width: 64px;
height: 64px;
cursor: pointer;
border-radius: 100%;
background-color: #fb8240;
box-shadow: 0 0 0 7px rgba(251, 130, 61, 0.2);
}
.audio-status::after {
position: absolute;
top: 22px;
left: 26px;
width: 0;
height: 0;
content: '';
border: 10px solid #fff;
border-color: transparent transparent transparent #fff;
border-left-width: 18px;
border-radius: 3px;
}
.audio-pause::after {
left: 25px;
width: 5px;
height: 22px;
border: none;
background-color: #fff;
box-shadow: 10px 0 0 0 #fff;
}
</style>
<script>
let filp = document.getElementById('filp');
let wrap = document.getElementById('wrap');
filp.onclick = function () {
if (wrap.style.transform == 'rotateX(180deg)') {
wrap.style.transform = 'rotateX(0deg)';
} else {
wrap.style.transform = 'rotateX(180deg)';
}
};
window.onload = function () {
let audio = document.querySelector('audio'); // 获取 audio 元素
let action = document.querySelector('#action'); // 播放｜暂停 按钮
let duration = audio.duration; // 获取整首歌的时间
var interval = ''; // 定义变量
let progressLen = 213.5; // 圆周长
const textDom = document.getElementsByClassName('text')[0]; // 数字进度
const circleDom = document.getElementsByClassName('circle')[0]; // 环形进度条
// 点击 播放｜暂停 按钮时触发下列事件
action.addEventListener('click', function () {
let status = audio.getAttribute('data-play'); // 获取播放状态
if (status == 'false') {
// 切换播放状态
audio.play();
audio.setAttribute('data-play', 'true');
} else {
audio.pause();
audio.setAttribute('data-play', 'false');
}
// 当音频处于播放状态时触发下列事件
audio.addEventListener('playing', function () {
clearTimeout(interval); // 取消定时操作
action.classList.add('audio-pause'); // 为 播放｜暂停 按钮添加 'audio-pause' 类名
audio.ontimeupdate = function () {
let currentTime = audio.currentTime; // 获取当前的播放时间
let number = Math.round((currentTime / duration) * 100); // 更新进度
textDom.innerHTML = number; // 更新dom
circleDom.style['stroke-dashoffset'] = progressLen - (progressLen / 100) * number;
console.log(progressLen - (progressLen / 100) * number);
};
});
// 当音频处于暂停状态时触发下列事件
audio.addEventListener('pause', function () {
action.classList.remove('audio-pause'); // 为 播放｜暂停 按钮移除 'audio-pause' 类名
clearTimeout(interval); // 取消定时操作
});
});
};
</script>
</html>