首页 > 代码库 > 进度条（可拖动，可定义）
进度条（可拖动，可定义）
在工作中，有一个进度条的效果，左边是一个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();
这个看起来易懂点。。。
进度条（可拖动，可定义）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。