8.4 进度条(水平)

<script>
window.onload = function (){
var box1 = document.getElementById('box1')
var box = box1.children[0];
var cunt = box1.children[1];
var oSpan = box.children[0];
var star = box.children[1];
// 当span被点击的时候发生的变化
oSpan.onmousedown = function (event) {
var event = event || window.event;
// 被点击的时候获取该点到左边线的距离disatex
var disateX = event.clientX - oSpan.offsetLeft;
document.onmousemove = function (event) {
var event = event || window.event;
var starWidth = event.clientX - disateX;
var bigWidth = box.offsetWidth - oSpan.offsetWidth;
// 判断移动div star 移动的范围
if (starWidth < 0) {
starWidth= 0;
}else if(starWidth >= bigWidth){
starWidth = bigWidth;
}
oSpan.style.left = starWidth + 'px';
star.style.width = starWidth + 'px';
cunt.innerHTML = parseInt(starWidth/bigWidth * 100)+ "%";
}
document.onmouseup = function () {
document.onmousemove = null;
document.onmouseup = null;
}
}
}
</script>

方式二 也是可以实现 这里就是mask 的宽 + oSpan 的宽 就=parent; 上面的mask宽为 100%
<script>
//我这里用的
window.onload = function () {
var box = document.getElementById('box');
var lf = box.children[0];
var rg = box.children[1];
var oSpan = lf.children[0];
var porgess = lf.children[1];
//当oSpan 被点击的时候
oSpan.onmousedown = function (event) {
// alert(0);
var event = event ||window.event ;
//求得 oSpan 被点击的时候 该点到它自己border的距离 = clientX - oSpan它自己的offsetLeft 因为他与它父亲定位了
var distanceX = event.clientX - oSpan.offsetLeft;
// var distaceY = event.clientY- oSpan.offsetTop;
document.onmousemove = function (event) {
event = event||window.event;
//求ospan 与它左边的距离 就是 moveDiv 的长度
var moveDiv = event.clientX -distanceX;
//判断 边界 就是移动的div 的最宽
var moveDiv_max = oSpan.offsetParent.offsetWidth - oSpan.offsetWidth;
if ( moveDiv <0) {
moveDiv = 0;
}else if( moveDiv >= moveDiv_max){
moveDiv = moveDiv_max;
}
oSpan.style.left = moveDiv + 'px';
porgess.style.width = moveDiv + 'px';
// 求出比例 就是 滚动的进度条的宽/它父亲的宽
rg.innerHTML = parseInt(porgess.offsetWidth/(oSpan.offsetParent.offsetWidth- oSpan.offsetWidth)*100)+ '%';
}
//清除鼠标抬起事件
document.onmouseup = function () {
document.onmousemove = null;
document.onmouseup= null;
}
}
}
</script>