自定义滑动选取价格

最近换工作，就很少来更新博客了。跑去面试，给面试官看我的个人的一些作品的时候，面试官会本能的觉得这些网上都已经有成品了，你再自己写一份，会不会是参照的网上的方法照搬过来然后说是自己的。。。其实这个是挺可笑的，虽然网上的是有比较成熟的方法，但是这些和自己独立开发出来完全是两个不一样的效果，不过最近面试了一些以后也慢慢知道自己需要对哪些知识进行补充，进行深入和拓展，也算一个不晓得收获吧。
前几天新公司有一个需求，是拖动滑块自定义价格，本来想在网上直接找一个插件的，但是没看到比较好的，就花了俩小时自己写了一个，项目催得紧，还没时间整理成插件模式的代码，先用方法流的形式和大家分享一下吧。

<script>var slidethumb=document.getElementsByClassName("dave-rangethumb").item(0),//滑块对象rangecont =document.getElementsByClassName("dave-rangecont").item(0),//slide的区域对象flag=false,//标志位，false代表不能滑动startX,//初始位置x,//移动的当前位置x_before,//移动的前一步位置slidethumbleft=window.getComputedStyle(slidethumb,null).getPropertyValue("left"),//滑块的css属性left的值，带有PXthroughpath=document.getElementsByClassName("dave-throughthepath").item(0),//滑块划过的区域对象length_sum=window.getComputedStyle(rangecont,null).getPropertyValue("width"),//slide的区域的宽度，带有PXavail_length=length_sum.substring(0,length_sum.indexOf("px")),//slide的区域的宽度，不带有PXthumb_width=window.getComputedStyle(slidethumb,null).getPropertyValue("width"),//滑块的宽度，带有PXthumb_truewidth=thumb_width.substring(0,thumb_width.indexOf("px")),//滑块的宽度，不带有PX;//dave_price_input=document.getElementsByClassName("dave-price-input").item(0),//获取输入框对象dynamicprice=document.getElementsByClassName("dave-dynprice").item(0),//价格显示区域davemaxprice=document.getElementsByClassName("dave-maxprice").item(0).innerHTML-0;//价格的上限//滑动滑块 startslidethumb.addEventListener("touchstart",touchstartfunc);slidethumb.addEventListener("touchmove",touchmovefunc);slidethumb.addEventListener("touchend",touchendfunc);function touchstartfunc(ev){flag=true;var touches=ev.touches[0];x=x_before=startX=touches.clientX;}function touchmovefunc(ev){if(flag==false){return;}ev.preventDefault();ev.stopPropagation();var touches=ev.touches[0];x_before=x;x=touches.clientX;if((slidethumbleft.substring(0,slidethumbleft.indexOf("px"))-0+x-x_before)>avail_length-thumb_truewidth){slidethumbleft=(avail_length-thumb_truewidth)+"px";}else if((slidethumbleft.substring(0,slidethumbleft.indexOf("px"))-0+x-x_before)<0){slidethumbleft="0px"}else{slidethumbleft=(slidethumbleft.substring(0,slidethumbleft.indexOf("px"))-0+x-x_before)+"px";}slidethumb.style.left=slidethumbleft;throughpath.style.width=(slidethumbleft.substring(0,slidethumbleft.indexOf("px"))-0+12)+"px";dynamicprice.value=calculationscale(slidethumbleft.substring(0,slidethumbleft.indexOf("px")),davemaxprice);}function touchendfunc(ev){if(flag==false){return;}//dave_price_input.value=calculationscale(slidethumbleft.substring(0,slidethumbleft.indexOf("px")),davemaxprice);dynamicprice.value=calculationscale(slidethumbleft.substring(0,slidethumbleft.indexOf("px")),davemaxprice);flag=false;}//滑动滑块 end//点击区域移动滑块 startrangecont.addEventListener("click",rangecont_clickfunc,true);function rangecont_clickfunc(ev){if(flag==true||ev.target==slidethumb){return;}var movetoX=ev.layerX;if(movetoX>avail_length-thumb_truewidth){movetoX=avail_length-thumb_truewidth;}else if(movetoX<0){movetoX=0;}slidethumbleft=movetoX+"px";slidethumb.style.left=slidethumbleft;throughpath.style.width=(slidethumbleft.substring(0,slidethumbleft.indexOf("px"))-0+12)+"px";//dave_price_input.value=calculationscale(movetoX,davemaxprice);dynamicprice.value=calculationscale(movetoX,davemaxprice);//console.log(dave_price_input.value);}//点击区域移动滑块 end//计算滑块的代表的值 startfunction calculationscale(value,max_price){var sum_length=avail_length-thumb_truewidth;var proportion=value/sum_length;var com_price=(max_price*proportion)+"";if(com_price.indexOf(".")<0){com_price=com_price;}else{var yuan_con=com_price.substring(0,com_price.indexOf("."));var jiaofen_con=com_price.substring(com_price.indexOf(".")+1);if(jiaofen_con.length==1){com_price=yuan_con+"."+jiaofen_con;}else{com_price=yuan_con+"."+jiaofen_con.substring(0,2);}}return com_price;}//计算滑块的代表的值 end//用户自行输入商品价格var input_flag=false;dynamicprice.onfocus=function(){input_flag=true;}window.onkeyup=function(){if(input_flag==true){var money_regist=/^[0-9]+(.[0-9]{1,2})?$/;var input_money=dynamicprice.value;if(input_money<0){console.log("aa");input_money=dynamicprice.value=0;}if(money_regist.test(input_money)){if(input_money>davemaxprice){input_money=dynamicprice.value=davemaxprice;}changeslide(input_money);}}}//dynamicprice.onchange=function(ev){//console.log(ev.target.value);//var money_regist=/^[0-9]+(.[0-9]{1,2})?$/;//var input_money=ev.target.value;////console.log(input_money);//if(money_regist.test(input_money)){//changeslide(input_money);//}//}//根据输入改变滑块的位置function changeslide(input_money){//console.log(input_money);var bili = (input_money-0)/davemaxprice;var thumb_length=bili*(avail_length-thumb_truewidth);slidethumbleft=thumb_length+"px"slidethumb.style.left=slidethumbleft;throughpath.style.width=(slidethumbleft.substring(0,slidethumbleft.indexOf("px"))-0+12)+"px";}</script>

这个页面方法很简单，都是用最基本的语言组织起来的，也没有很复杂的算法和逻辑判断，对一些js高手来说这个效果是分分钟能做的，但是js不熟悉的，还是有些东西可以学习和借鉴的，以后有时间我会将这个封装成一个插件模式。到时候再将插件分享出来。

这个效果主要是在移动端运行的，暂时整个兼容还没做到很全面，后期的优化当中我会进行移动和PC的整体兼容，这个效果在一些日常的界面中见的也算蛮多的，现在暂时没时间优化，所以大家先暂时凑合着看吧，后续这个插件我肯定会放上来的，一定不会让读者们失望的。

整个代码的注释已经比较全面了，我想大家应该都能看懂了，对代码的讲解我在这儿就不多嘴了。如有疑问，大家可以在评论栏里进行评论，我会一一认真的做答。

谢谢您观看此博客。。。