首页 > 代码库 > 进度条（可拖动，可定义）

进度条（可拖动，可定义）

2024-09-11 20:25:19   216人阅读

在工作中，有一个进度条的效果，左边是一个input，两者存在着密不可分的联系，引用的插件却出现了点小BUG，一怒之下自己写了一个。

HTML

    <div>        <input type="text" id="input" value="" placeholder="0" autocomplete="off">%        <div id="tiao">            <div id="yuan"></div>            <div id="jindu"></div>        </div>    </div>

 

CSS

    html,body{            height: 100%;        }        body{            margin: 0;        }        body>div{            padding-top: 60px;            margin-left: 60px;        }        #tiao{            display: inline-block;            width: 200px;            height: 4px;            background: #ddd;            border-radius: 3px;            position: relative;            margin-left: 50px;        }        input{            border: 1px solid #ddd;            width: 100px;            text-align: center;            vertical-align: top;        }        #yuan{            display: inline-block;            width: 12px;            height: 12px;            border-radius: 50% 50%;            background: #177ad8;            position: absolute;            margin-top: -4px;            cursor: pointer;            box-shadow: 0px 0px 3px #177ad8;        }        #jindu{            width: 0px;            height: 4px;            background-color: #177ad8;            border-radius: 3px;        }

 

JS

    var scale =function(input,yuan,jindu,tiao){        this.input =document.getElementById(input);        this.yuan =document.getElementById(yuan);        this.jindu=document.getElementById(jindu);        this.tiao=document.getElementById(tiao);        this.tiaoW =this.tiao.offsetWidth;        this.init()    }    scale.prototype ={        init: function(){            var isfalse =false,                 f = this,                m = Math,                b = document.body,                minValue =0,                maxValue =100;                        f.yuan.onmousedown =function(e){                isfalse =true;                var X =e.clientX;                var offleft =this.offsetLeft;                var max = f.tiao.offsetWidth - this.offsetWidth;                b.onmousemove =function(e){                    if (isfalse == false){                        return;                    }                    var changeX= e.clientX;                    var moveX =m.min(max,m.max(-2,offleft+(changeX-X)));                    f.input.value =m.round(m.max(0,moveX / max) * 100);                    f.yuan.style.marginLeft =m.max(0, moveX) +"px";                    f.jindu.style.width =moveX +"px";                }            }            b.onmouseup =function(){                isfalse =false;            }            f.input.onblur =function(){                var theV =this.value*1;                if(theV >maxValue || theV <minValue){                    alert("输入的数值不正确");                    f.input.value ="";                    f.yuan.style.marginLeft ="0px";                    f.jindu.style.width ="0px";                    return;                }                var xxx =theV/100*f.tiaoW;                f.yuan.style.marginLeft =xxx +"px";                f.jindu.style.width =xxx +"px";            }        }    }    new scale("input","yuan","jindu","tiao");

 

封装了一下，感觉更麻烦了。。。每次封装都有这样的感觉，毕竟小菜鸟一枚，若是有更优化的方法望看到的园友指正。。。

 

关于数学，关于逻辑，都是我的弱势，思考起来常常脑海一片混乱，所以自己在编写的时候也会加上注释，放一波代码

    var input =document.getElementById("input");    var yuan =document.getElementById("yuan");    var jindu =document.getElementById("jindu");    var tiao =document.getElementById("tiao");    var tiaoW =tiao.offsetWidth;    function schedule(){        var isfalse =false; //控制滑动        yuan.onmousedown =function(e){            isfalse =true;            var X =e.clientX; //获取当前元素相对于窗口的X左边                        var offleft =this.offsetLeft; //当前元素相对于父元素的左边距                        var max = tiao.offsetWidth - this.offsetWidth; //宽度的差值                        document.body.onmousemove=function(e){                if (isfalse == false){                    return;                }                var changeX= e.clientX; //在移动的时候获取X坐标                                var moveX =Math.min(max,Math.max(-2,offleft+(changeX-X))); //超过总宽度取最大宽                input.value =http://www.mamicode.com/Math.round(Math.max(0,moveX / max) * 100);                yuan.style.marginLeft =Math.max(0, moveX) +"px";                jindu.style.width =moveX +"px";            }        }        document.body.onmouseup =function(){            isfalse =false;         }        var minValue =http://www.mamicode.com/0;        var maxValue =http://www.mamicode.com/100;        input.onblur =function(){            var theV =this.value*1;            if(theV >maxValue || theV <minValue){                alert("输入的数值不正确");                input.value ="";                jindu.style.width ="0px";                yuan.style.marginLeft ="0px";                return;            }            var xxx =theV/100*tiaoW;            yuan.style.marginLeft =xxx +"px";            jindu.style.width =xxx +"px";        }    }    schedule();

 

这个看起来易懂点。。。

 

进度条（可拖动，可定义）


联系
我们