HTML+CSS+JS原生简易进度条

呜呜时隔多年终于修改完善好了

这就是个超级简陋的进度条,代码就直接摆出来了,注释都有,菜鸡菜鸡,求大佬别喷~

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="../css/process.css">
    <title>SLIDER</title>
</head>
<body>
    <div class='main'>
        <div id="blank">
            <div id="fill">
                <div id="slider" onclick="editColor()"></div>
            </div>
        </div>
    </div>
    <script>
    var slider=(function(){
    //独立作用域??
    slide=function(){
        var blank=document.getElementById('blank');
        var fill=document.getElementById('fill');
        var slider=document.getElementById('slider');
        blank_left=blank.getBoundingClientRect().left;
        blankwid=blank.getBoundingClientRect().width;
        move(blank,slider,fill);
    };
    move=function(e_blank,e_slider,e_fill){
    //即blank,slider,fill
    //drag用来存储滑块允许拖拽和不允许拖拽的状态,就相当于cpp里面可以改变的那个量吧,懂我意思就好
        var drag=0;
        e_blank.addEventListener('click',function (e) {  
            //e是传递进去的事件参数event
            if(e.target==e_slider){
            //点击滑块自己,什么都不发生......               
            }
            else{
                if(e.offsetX>blankwid) {
                    e_fill.style.width=blankwid;
                }else if(e.offsetX<0){
                    e_fill.style.width='0px';
                }else{
                    e_fill.style.width=e.offsetX-10+'px';
                }
            }
        });
        //修改drag的状态        
        e_slider.addEventListener('mousedown',function(){
            drag=1;
            e_slider.style.color=red
        });
        //用document,保证在整个页面容器里面任何地方松开按钮都能修改drag的状态        
        document.addEventListener('mouseup',function(){
            drag=0;
        });
        //滑块和填充块跟随移动 
        document.addEventListener('mousemove',function(e){
        //用document,鼠标在整个页面滑动都行
            if(drag==1){
                if(e.pageX>blank_left+blankwid) {
                    e_fill.style.width=blankwid;
                }else if(e.pageX<blank_left){
                    e_fill.style.width=0;
                }else{
                    e_fill.style.width=e.pageX-blank_left+'px';
                }
                //offsetX相对于元素,pageX相对于整个页面
            }
        });
    };
    return {
        slide:slide
        }
    })();
    slider.slide(); //闭包后运行
    </script>
</body>
</html>

CSS部分

* {
  margin: 0;
  padding: 0;
  height:100vh;
}

.main {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  background-color: black;
}

#blank{
  position: relative;
  display: flex;
  align-items: center;
  width:300px;
  height:10px;
  border-radius: 10px;
  border:2px solid whitesmoke;
}

#fill{
  position:absolute;
  height:11px;
  width:66px;
  border-radius: 10px;
  background: whitesmoke;
}

#slider{
  position: absolute;
  right:0px;     
  top: 50%;
  transform: translate(50%,-50%);
  //上面三行的作用是让slider直接“绑定”在fill的右边
  width:20px;
  height:20px;
  border-radius: 50%;
  background-color: yellow;
  cursor:pointer;
}

*累了累了,赶紧睡觉 *

你可能感兴趣的:(html,css,javascript,js)