js实现进度条的拖拽

目录

代码分析

搭建一个进度条

进度条的样式

js控制拖拽

js整体代码

---

代码分析

搭建一个进度条

html代码实现

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

进度条的样式

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;
}