最近换工作,就很少来更新博客了。跑去面试,给面试官看我的个人的一些作品的时候,面试官会本能的觉得这些网上都已经有成品了,你再自己写一份,会不会是参照的网上的方法照搬过来然后说是自己的。。。其实这个是挺可笑的,虽然网上的是有比较成熟的方法,但是这些和自己独立开发出来完全是两个不一样的效果,不过最近面试了一些以后也慢慢知道自己需要对哪些知识进行补充,进行深入和拓展,也算一个不晓得收获吧。
前几天新公司有一个需求,是拖动滑块自定义价格,本来想在网上直接找一个插件的,但是没看到比较好的,就花了俩小时自己写了一个,项目催得紧,还没时间整理成插件模式的代码,先用方法流的形式和大家分享一下吧。
前几天新公司有一个需求,是拖动滑块自定义价格,本来想在网上直接找一个插件的,但是没看到比较好的,就花了俩小时自己写了一个,项目催得紧,还没时间整理成插件模式的代码,先用方法流的形式和大家分享一下吧。
<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的值,带有PX throughpath=document.getElementsByClassName("dave-throughthepath").item(0),//滑块划过的区域对象 length_sum=window.getComputedStyle(rangecont,null).getPropertyValue("width"),//slide的区域的宽度,带有PX avail_length=length_sum.substring(0,length_sum.indexOf("px")),//slide的区域的宽度,不带有PX thumb_width=window.getComputedStyle(slidethumb,null).getPropertyValue("width"),//滑块的宽度,带有PX thumb_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;//价格的上限 //滑动滑块 start slidethumb.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 //点击区域移动滑块 start rangecont.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 //计算滑块的代表的值 start function 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的整体兼容,这个效果在一些日常的界面中见的也算蛮多的,现在暂时没时间优化,所以大家先暂时凑合着看吧,后续这个插件我肯定会放上来的,一定不会让读者们失望的。
整个代码的注释已经比较全面了,我想大家应该都能看懂了,对代码的讲解我在这儿就不多嘴了。如有疑问,大家可以在评论栏里进行评论,我会一一认真的做答。
谢谢您观看此博客。。。