window.onload = function() {
let bar = document.getElementById("progress_bar")
let fg = document.getElementById("progress_bar_fg")
let mask = document.getElementById("mask")
let value = document.getElementById("value")
//监听鼠标按下
mask.onmousedown = function(event) {
let e = event || window.event
//获取mask初始位置
// console.log(mask.offsetLeft);
// console.log(e.clientX);
let offsetleft = e.clientX - mask.offsetLeft
//console.log(offsetleft);
//监听鼠标移动(在按下事件内)
document.onmousemove = function() {
let e = window.event || arguments[0]
//获取鼠标移动距离
let x = e.clientX - offsetleft
//mask移动
if (x < 0) {
x = 0
} else if (x >= bar.offsetWidth - mask.offsetWidth) {
x = bar.offsetWidth - mask.offsetWidth
}
mask.style.left = x + "px"
fg.style.width = x + "px"
value.innerText = parseInt(x / (bar.offsetWidth - mask.offsetWidth) * 100) + "%"
return false
}
//监听鼠标抬起(也在鼠标按下事件)
document.onmouseup = function() {
//销毁移动事件
document.onmousemove = null
}
}
}
