博客

前言

利用js实现一个进度条拖拽的demo。

一、代码分析

1.搭建一个进度条

html代码如下（示例）：

 <!-- 外部容器 -->
    <div class="wrappers">
        <!-- 包裹进度条 -->
        <div class="wrapper">
            <!-- 进度条 -->
            <div id="progress">
                <!-- 进度条右边圆角 -->
                <div id="progress-bar"></div>
            </div>
        </div>
        <!-- 设置进度条默认显示 0%-->
        <span id="show">0%</span>
    </div>

2.对进度条进行一定的样式修改

css代码如下（示例）：

/*清除浏览器默认样式*/
*{
    margin:0;
    padding:0;
}
/* 设置外部容器 */
.wrappers{
    width:900px;
    height:6px;
    margin:100px auto;
}
/* 设置进度条容器 */
.wrapper{
    width:800px;
    height:6px;
    margin-bottom:0;
    line-height:6px;
    position:relative;
    background-color:hsl(108, 100%, 83%);
}
/* 设置进度条显示颜色 */
#progress{
    width:0;
    height:100%;
    background-color:red;
}
/* 设置进度条右侧圆点 */
#progress-bar{
    width:20px;
    height:20px;
    position:absolute;
    bottom:-6px;
    border-radius: 50%;
    background-color:hsl(252, 100%, 83%);
}
/* 设置显示百分比 */
#show{
    position:relative;
    left:840px;
    top:-12px;
}

3.对进度条应用js代码

1.老规矩先为全局对象window添加onload事件，让js代码后加载,之后的代码全部写在这里边。

window.onload = function(){

};

2.然后分别获取进度条对象（progress）、进度条右边拖动圆角对象（progress-bar）和百分比显示对象（show）。

 			// 获取progress对象
            var progress = document.getElementById("progress");
            // 获取show对象
            var show = document.getElementById("show");
            // 获取progress_bar对象
             // 为进度条右侧圆点绑定鼠标按下事件
            var progress_bar =  document.getElementById("progress-bar");

3.为progress-bar对象分别绑定鼠标按下事件，鼠标移动事件，鼠标抬起事件。这里要注意，progress-bar的鼠标移动事件和鼠标抬起事件，要写在鼠标按下事件的里边。这样才能实现拖拽的功能。

   // 为进度条右侧圆点绑定鼠标按下事件
            var progress_bar =  document.getElementById("progress-bar");
            progress_bar.onmousedown = function(event){
                event = event || window.event;
                //获取圆点偏移量
                var progressLeft = event.clientX - this.offsetLeft;

                // 为右侧圆点绑定拖动事件
                document.onmousemove = function(event){
                    event = event || window.event;
                    // 获取鼠标坐标
                    var progressX = event.clientX - progressLeft;
                     // 暂停拖动（如果拖动条超出范围，则停止拖动）
                    if(progressX<=0){
                        progressX = 0;
                    }
                    else if(progressX>=800){
                        progressX = 800;
                    }
                    console.log(progressX);
                    progress_bar.style.left = progressX+"px";
                    // 显示进度条
                    progress.style.width = progressX+"px";
                    // 显示进度条百分比
                    show.innerHTML = Math.round(progressX/8)+"%";

                };

                // 为右侧圆点绑定鼠标抬起事件
                document.onmouseup = function(event){
                    event = event || window.event;
                    // 取消鼠标移动事件
                    document.onmousemove = null;
                    // 取消鼠标抬起事件
                    document.onmouseup = null;
                };
                return false;
            };

<br//>

4.js整体代码

	<script type="text/javascript">
        window.onload = function(){
            // 获取progress对象
            var progress = document.getElementById("progress");
            // 获取show对象
            var show = document.getElementById("show");
            // 获取progress_bar对象
             // 为进度条右侧圆点绑定鼠标按下事件
            var progress_bar =  document.getElementById("progress-bar");
            progress_bar.onmousedown = function(event){
                event = event || window.event;
                //获取圆点偏移量
                var progressLeft = event.clientX - this.offsetLeft;

                // 为右侧圆点绑定拖动事件
                document.onmousemove = function(event){
                    event = event || window.event;
                    // 获取鼠标坐标
                    var progressX = event.clientX - progressLeft;
                    if(progressX<=0){
                        // 暂停拖动（如果拖动条超出范围，则停止拖动）
                        progressX = 0;
                    }
                    else if(progressX>=800){
                        progressX = 800;
                    }
                    console.log(progressX);
                    progress_bar.style.left = progressX+"px";
                    // 显示进度条
                    progress.style.width = progressX+"px";
                    // 显示进度条百分比
                    show.innerHTML = Math.round(progressX/8)+"%";

                };

                // 为右侧圆点绑定鼠标抬起事件
                document.onmouseup = function(event){
                    event = event || window.event;
                    // 取消鼠标移动事件
                    document.onmousemove = null;
                    // 取消鼠标抬起事件
                    document.onmouseup = null;
                };
                //取消浏览器对拖拽内容进行搜索的默认行为
                return false;
            };

        };
    </script>

说明：

1.我们要将鼠标移动事件和鼠标抬起事件绑定给document，因为如果只绑定给progress-bar则会出现鼠标离开进度条圆点时，进度条无法拖动和鼠标在进度条圆点上即使不点击也会进行拖动的现象。

2.当我们拖拽一个网页中的内容时，浏览器会默认去搜索引擎中搜索内容，此时会导致拖拽功能的异常，这个是浏览器提供的一个默认行为。 如果不希望发生这个行为则可以通过return false来取消这一行为。这个方法对IE8及其以下浏览器无效。

5.运行结果

总结

通过这节内容来对js事件相关属性和方法进行一个练习。这个例子也比较简单，之后还会更新原生js编写一个视频播放的demo，这个例子也会应用到其中。