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>
<link rel="stylesheet" href="progress.css">
</head>
<body>
<div class="app"> </div>
</body>
<script>
function createSmallerBar(el) {
var main = document.createElement("div");
main.className = "main";
document.querySelector(".app").appendChild(main);
var progress = document.createElement("div");
progress.className = "progress";
document.querySelector(".main").appendChild(progress);
var smaller = document.createElement("div");
smaller.className = "smaller";
document.querySelector(".progress").appendChild(smaller);
function change(e) {
var width1=e.clientX-main.offsetLeft;
if(width1<0){
width1=0;
}else if(width1>main.getBoundingClientRect().width){
width1=main.getBoundingClientRect().width;
}
progress.style.width=width1+15+'px';
smaller.style.left=width1+'px';
}
smaller.addEventListener("mousedown",function(){
document.addEventListener("mousemove",change);
})
document.addEventListener("mouseup",function(){
document.removeEventListener("mousemove",change);
})
main.addEventListener("mousedown",change);
}
createSmallerBar(document.querySelector(".app"));
</script>
</html>css代码：
* {
padding: 0;
margin: 0;
}
body {
background-color: purple;
}
.main {
position: absolute;
width: 800px;
height: 10px;
left: 50%;
margin-left: -400px;
top: 50%;
margin-top: -5px;
background-color: pink;
border-radius: 10px;
cursor: pointer;
}
.progress {
position: relative;
width: 0px;
height: 15px;
border-radius: 10px;
background-color: black;
}
.smaller {
position: relative;
border-radius: 10px;
width: 15px;
height: 15px;
margin-top: -2px;
cursor: pointer;
background-color: red;
}版权声明：本文为qq_54065582原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。