测试页 黔大溪 提供
<!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>简单的进度条呀</title>
<style>
.d-flex {
display: -ms-flexbox !important;
display: flex !important;
}
.align-items-center {
-ms-flex-align: center !important;
align-items: center !important;
}
/* 清除浮动 */
.clearfix::after {
display: block;
clear: both;
content: "";
}
#progress-bar-module {
padding: 10%;
color: #fff;
text-align:center;
}
#current-play-time {
float: left;
width: 10%;
font-size: 14px;
text-align: right;
}
#progress-bar-box {
background-color: #666;
width: 90%;
height: 1.5px;
border-radius: 50px;
margin: auto;
border: 0px;
}
#progress-bar {
width: 0%;
height: 1.5px;
border-radius: 50px;
background-color: #fff;
}
#progress-bar-point {
height: 6px;
width: 6px;
border-radius: 50%;
cursor: pointer;
background-color: #fff;
}
#end-play-time {
float: right;
width: 10%;
text-align: left;
font-size: 14px;
}
</style>
</head>
<body style="background-color: #000">
<!-- 音乐控制器 -->
<!-- 进度条 -->
<div id="progress-bar-module" class="clearfix d-flex">
<!-- 当前播放时间 -->
<div id="current-play-time">0%</div>
<!-- 进度条盒子 -->
<div class="progress-bar-item" style="width: 80%; margin: auto;">
<!-- 进度条有效范围 -->
<div id="progress-bar-box" class="d-flex align-items-center">
<!-- 进度条播放进度 -->
<div id="progress-bar"></div>
<!-- 进度条小圆点 -->
<div id="progress-bar-point"></div>
</div>
</div>
<!-- 音频总时长 -->
<div id="end-play-time">100%</div>
</div>
</body>
</html>
<script>
//移动端触摸事件
var progress_bar_point = document.getElementById('progress-bar-point')
var progress_bar_box = document.getElementById('progress-bar-box')
//移动端触摸屏幕时触发ontouchstart
progress_bar_box.ontouchstart = () => {
progress_bar_point.style.width = '15px'
progress_bar_point.style.height = '15px'
//移动端拖拽时触发
progress_bar_box.ontouchmove = (e) => {
console.log(e)
// 触点相对于HTML文档左边沿的X坐标。
console.log(e.targetTouches[0].pageX)
// 当前元素相对于 offsetParent 节点左边界的偏移像素值。
console.log(progress_bar_box.offsetLeft)
// 进度条的进度
console.log(e.targetTouches[0].pageX-progress_bar_box.offsetLeft)
//进度条总长度
console.log(progress_bar_box.offsetWidth)
progress_play = Number((e.targetTouches[0].pageX - progress_bar_box.offsetLeft) / progress_bar_box.offsetWidth) * 100
if(progress_play > 100) return progress_play = 100;
if(progress_play < 0) return progress_play = 0;
document.getElementById('progress-bar').style.width = `${progress_play}%`;
document.getElementById('current-play-time').innerHTML = `${parseInt(progress_play)}%`;
}
//移动端触摸屏幕结束后触发
progress_bar_box.ontouchend = () => {
progress_bar_point.style.width = '6px'
progress_bar_point.style.height = '6px'
}
}
</script>
网友评论