<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
.big,.small{
width: 300px;
height: 30px;
}
.big{
border:1px solid #000;
margin: 50px auto;
}
.small{
width: 0;
background-color: hotpink;
}
span{
position: absolute;
left: 700px;
top: 55px
}
</style>
<body>
<div class="big">
<div class="small"></div>
</div>
<span>00</span>
</body>
<script>
// 给big绑定鼠标按下事件
var big = document.querySelector('.big');
var small = document.querySelector('.small');
big.onmousedown = function(){
// 获取鼠标在big上的位置
var x = window.event.offsetX
// 将x设置给small的width
small.style.width = x + 'px'
// 计算百分比
var percent = x / big.clientWidth * 100
document.qu
可拖拽进度条
最新推荐文章于 2024-05-09 11:33:03 发布
![](https://img-home.csdnimg.cn/images/20240711042549.png)