js实现可拖拽进度条

1、新建html文档。

3、书写hmtl代码。<ul class="lanren"> <li>red <span id="title">0</span> <div class="scale_panel"> <span class="r">100</span>0 <div class="scale" id="bar"> <div></div> <span id="btn"></span> </div> </div> </li></ul>

5、书写并添加js代码。<script>var scale = function (btn,bar,title){ this.btn=document.getE造婷用痃lementById(btn); this.bar=document.getElementById(bar); this.title=document.getElementById(title); this.step=this.bar.getElementsByTagName("div")[0]; this.init();};scale.prototype={ init:function (){ var f=this,g=document,b=window,m=Math; f.btn.onmousedown=function (e){ var x=(e||b.event).clientX; var l=this.offsetLeft; var max=f.bar.offsetWidth-this.offsetWidth; g.onmousemove=function (e){ var thisX=(e||b.event).clientX; var to=m.min(max,m.max(-2,l+(thisX-x))); f.btn.style.left=to+'px'; f.ondrag(m.round(m.max(0,to/max)*100),to); b.getSelection ? b.getSelection().removeAllRanges() : g.selection.empty(); }; g.onmouseup=new Function('this.onmousemove=null'); }; }, ondrag:function (pos,x){ this.step.style.width=Math.max(0,x)+'px'; this.title.innerHTML=pos+'%'; }}new scale('btn','bar','title');</script>

7、查看效果。