原生JS+CSS或HTML5实现简单的进度条和滑动条效果

#wrapper{
    position: relative;
    width:200px;
    height:100px;
    border:1px solid darkgray;
}
#progressbar{
    position: absolute;
    top:50%;
    left:50%;
    margin-left:-90px;
    margin-top:-10px;
    width:180px;
    height:20px;
    border:1px solid darkgray;

}
/*在进度条元素上调用动画*/
#fill{
    animation: move 2s;
    text-align: center;
    background-color: #6caf00;
}
/*实现元素宽度的过渡动画效果*/
@keyframes move {
    0%{
        width:0;

    }
    100%{
        width:100%;
    }
}

var progressbar={
    init:function(){
        var fill=document.getElementById('fill');
        var count=0;
    //通过间隔定时器实现百分比文字效果,通过计算CSS动画持续时间进行间隔设置
        var timer=setInterval(function(e){
            count++;
            fill.innerHTML=count+'%';
            if(count===100) clearInterval(timer);
        },17);
    }
};
progressbar.init();

<!--外层容器-->
<div id="wrapper">
    <!--填充块-->
    <div id="fill"></div>
    <!--滑块-->
    <div id="slider"></div>
</div>

#wrapper{
    position: relative;
    width:200px;
    height:20px;
    border:1px solid darkgray;
}
/*将滑块和填充块设置成inline-block,保证他们在同一行内*/
#slider{
    position: absolute;
    left:0;
    width:20px;
    height:20px;
    display: inline-block;
    background-color: #af58a8;
    cursor:pointer;
}
#fill{
    display: inline-block;
    width:0;
    height:20px;
    background: #6caf00;
}

var slider=(function(){
    init=function(){
        var wrapper=document.getElementById('wrapper');
        var slider=document.getElementById('slider');
        var fill=document.getElementById('fill');
        move(wrapper,slider,fill);
    };
    move=function(dom1,dom2,dom3){
    //drag用来存储滑块允许拖拽和不允许拖拽的状态
        var drag=0;
    //在滑动条上绑定click事件以实现点击任意位置,自动调整滑块和填充块的效果
        dom1.addEventListener('click',function (e) {
            if(e.target===dom2){
            //点击滑块自身不做任何事情                
            }else{
                if(e.offsetX>180) {
                    dom2.style.left='180px';
                    dom3.style.width='180px';
                }else if(e.offsetX<20){
                    dom2.style.left='0px';
                    dom3.style.width='0px';
                }else{
                    dom2.style.left=e.offsetX-10+'px';
                    dom3.style.width=e.offsetX-10+'px';
                }
            }
        });
        //修改drag的状态        
        dom2.addEventListener('mousedown',function(){
            drag=1;
        });
        //释放按钮绑定在document上,保证在整个页面容器里面任何地方松开按钮都能修改drag的状态        
        document.addEventListener('mouseup',function(){
            drag=0;
        });
        // 使滑块和填充块跟随移动,这里使用的pageX,需要计算和视窗左侧的距离而不是和滑动块左侧的距离       
        dom1.addEventListener('mousemove',function(e){
            if(drag==1){
                if(e.pageX>189) {
                    dom2.style.left='180px';
                    dom3.style.width='180px';
                }else if(e.pageX<29){
                    dom2.style.left='0px';
                    dom3.style.width='0px';
                }else{
                    dom2.style.left=e.pageX-19+'px';
                    dom3.style.width=e.pageX-19+'px';
                }
            }
        });

    };
    return {
        init:init
    }
})();
slider.init();