自定义滑动选取价格

最近换工作，就很少来更新博客了。跑去面试，给面试官看我的个人的一些作品的时候，面试官会本能的觉得这些网上都已经有成品了，你再自己写一份，会不会是参照的网上的方法照搬过来然后说是自己的。。。其实这个是挺可笑的，虽然网上的是有比较成熟的方法，但是这些和自己独立开发出来完全是两个不一样的效果，不过最近面试了一些以后也慢慢知道自己需要对哪些知识进行补充，进行深入和拓展，也算一个不晓得收获吧。

前几天新公司有一个需求，是拖动滑块自定义价格，本来想在网上直接找一个插件的，但是没看到比较好的，就花了俩小时自己写了一个，项目催得紧，还没时间整理成插件模式的代码，先用方法流的形式和大家分享一下吧。

<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的整体兼容，这个效果在一些日常的界面中见的也算蛮多的，现在暂时没时间优化，所以大家先暂时凑合着看吧，后续这个插件我肯定会放上来的，一定不会让读者们失望的。
整个代码的注释已经比较全面了，我想大家应该都能看懂了，对代码的讲解我在这儿就不多嘴了。如有疑问，大家可以在评论栏里进行评论，我会一一认真的做答。
谢谢您观看此博客。。。