实现一个简单的进度条,样式写的有点丑。。。
可以根据自己喜好改一下,
下面是源码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>进度条</title>
<style>
#box {
width: 1200px;
height: 100px;
position: absolute;
color: #ffffff;
background-color: #3F3E3E;
}
#bar {
width: 1200px;
height: 10px;
border-radius: 10px;
background: #ffffff;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
cursor: pointer;
}
#bar_after{
width: 0px;
height: 10px;
border-radius: 10px;
background: #1DCB93;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 320px;
margin: auto;
cursor: pointer;
}
#dot{
width: 15px;
height: 15px;
background: #1DCB93;
position: absolute;
bottom: 0;
top: 0;
margin: auto 0;
border-radius: 50%;
cursor: pointer;
}
#text{
font-size: 20px;
}
</style>
</head>
<body onselectstart="return false">
<div id="box" >
<div id="bar">
<div id="dot"></div>
</div>
<div id="bar_after"></div>
<span id="text">0%</span>
</div>
<script>
var box=document.getElementById("box");//容器
var bar=document.getElementById("bar");//进度条
var dot=document.getElementById("dot");//进度圆点
var bar_after=document.getElementById("bar_after");//圆点之前的进度条
var text=document.getElementById('text');//进度百分比
var dotL,newL,moveL,mouseX,left;
var cha = bar.offsetWidth - dot.offsetWidth;
var bar_width=bar.offsetWidth;
var index=false;//标记状态
var evt=new Event("change");//本身的事件
init();
function init() {
dot.addEventListener("mousedown",mouseDownclickHandler);
document.addEventListener("mousemove",mouseMoveclickHandler)
document.addEventListener("mouseup",mouseUpclickHandler);
bar.addEventListener("click",clickHandler);
bar_after.addEventListener("click",clickHandler);
}
function mouseDownclickHandler(e) {
index=true;
dotL=dot.offsetLeft;
mouseX=e.clientX; //鼠标按下拖动的位置
}
function mouseMoveclickHandler(e) {
if(index==true){
moveL=e.clientX-mouseX;//鼠标移动
newL=dotL+moveL;//left值
//判断最小值与最大值
if(newL<0){
newL = 0;
}
if(newL>=bar_width-dot.offsetWidth){
newL=bar_width-dot.offsetWidth;
}
// 改变left值
bar_after.style.width=(newL+5)+'px';
bar_after.style.right=(bar_width-newL)+'px';
dot.style.left = newL + 'px';
// 计算比例
bili=parseInt(newL/(bar_width-dot.offsetWidth)*100);
text.innerText=bili+'%';
}
}
function mouseUpclickHandler(e) {
index=false;
evt.elem=this;//当前指向 对象
document.dispatchEvent(evt);//朝谁发送 抛发
}
function clickHandler(e) {
left = e.clientX-box.offsetLeft-dot.offsetWidth/2;
if(left<0){
left=0;
}
if(left>=bar_width-dot.offsetWidth){
left=bar_width-dot.offsetWidth;
}
dot.style.left=left+'px';
bar_after.style.width=(left+5)+'px';
bar_after.style.right=(bar_width-left)+'px';
bili=parseInt(left/(bar_width-dot.offsetWidth)*100);
text.innerText=bili+'%';
}
</script>
</body>
</html>