Js进阶之进度条

思路

1. 获取需要的标签

2. 监听鼠标按下的事件

3. 监听鼠标移动的事件：3.1设置初始位置
   3.2获取移动的位置 （x）
   3.3判断边界位置（防超出）
   3.4使其移动（改变span的left值和进度调移动的颜色范围的width值
   3.5求出百分比

4. 监听鼠标离开的事件：也就是使得鼠标移动为Null。

    <script>
        window.onload = function (){
            //1.获取需要的标签
            var progress = document.getElementById("progress");
            var progress_bar = progress.children[0];
            var progress_bar_fg = progress_bar.children[0];
            var span = progress_bar.children[1];
            var progress_value = progress.children[1];
            //2.监听事件
            span.onmousedown = function (event){
                var event = event || window.event;
                //2.1设定起始位置
                var offsetLeft = event.clientX - span.offsetLeft;    //offsetLeft:根据定位来的
                //2.2 监听鼠标移动
                document.onmousemove = function (event){
                    var e = event || window.event;
                    //2.2.1获取移动位置
                    var x = e.clientX - offsetLeft;
                    //2.2.2判断
                    if(x < 0){
                        x = 0;
                    }else if(x >= progress_bar.offsetWidth - span.offsetWidth){
                        x = progress_bar.offsetWidth - span.offsetWidth;
                    }
                    //2.2.3 动起来
                    span.style.left = x + "px";
                    progress_bar_fg.style.width = x + "px";
                    progress_value.innerHTML =parseInt(x / (progress_bar.offsetWidth - span.offsetWidth ) * 100) +'%';
                    return false;
                }
                //2.3监听鼠标抬起
                document.onmouseup = function (){
                    document.onmousemove = null;
                }
            }
        }
    </script>

最后一步的鼠标抬起应该多为注意；防止服务器不知道要执行哪个，所以要在其之前让其出去（return false) ；百分比的换算 要减去光标的宽才是实际走的路程。