Price rolling function of similar Xijie Network

At the weekend, I was prepared to sort out the website content to enrich the website data. As a result, a netizen asked me to help me modify something, later I mentioned the price-rolling feature of xijie.com. I tried to copy it... It is estimated that many products in shanzhai of China come in this way... This problem should be changed earlier! Your hands are cheap ...!

Back to the topic, let's talk about this feature, without encapsulation or code optimization. If it is done, it will be directly posted. If there are bugs or incompatibility issues, please forgive me!

#dragbar{ height:12px; position:relative; width:170px; top:26px; float:left;}
#long_bar{ height:0.6em; border:1px solid #aaa; border-radius:4px;}
#small_bar{ background:#ccc; position:absolute; z-index:1; top:0; height:100%;}
#long_bar .btn{ width:1.2em; z-index:2; position:absolute; height:1.2em; cursor:pointer; top:-0.3em; margin-left:-0.6em; background:#D72D2E; border-radius:4px; border:1px solid #D3D3D3;}
.price{ width:100px; padding:22px 5px 0; height:18px; color:#c90202; float:left; text-align:center;}

<Div id = "min_price" class = "price" style = "margin-Right: 5px;"> 100 RMB </div>
<Div id = "dragbar">
<Div id = "long_bar">
<Div id = "small_bar"> </div>
<SPAN class = "BTN"> </span>
<SPAN class = "BTN"> </span>
</Div>
</Div>
<Div id = "max_price" class = "price" style = "margin-left: 5px;"> 1319 RMB </div>

Window. onload = function (){
VaR longbar = Document. getelementbyid ("long_bar ");
VaR smallbar = Document. getelementbyid ("small_bar ");
VaR arrbtn = longbar. getelementsbytagname ("span ");
VaR MinP = Document. getelementbyid ("min_price ");
VaR maxp = Document. getelementbyid ("max_price ");
VaR minprice = parseint (MinP. innerhtml );
VaR maxprice = parseint (maxp. innerhtml );
VaR Total = maxprice-minprice;
Smallbar. style. width = 100 + "% ";
Smallbar. style. Left = 0;
Arrbtn [0]. style. Left = 0;
Arrbtn [1]. style. Left = 100 + "% ";

VaR maxwidth = longbar. offsetwidth; // maximum Moving Value
 
Arrbtn [0]. onmousedown = function (e ){
VaR x = (E | window. Event). clientx; // obtain the x-axis length value of the click position.
// X-axis length value of the button
VaR lenght = This. offsetleft + (this. offsetwidth/2 );
VaR btn2lenght = arrbtn [1]. offsetleft + (arrbtn [1]. offsetwidth/2 );
VaR maxlenght = math. Min (maxwidth, btn2lenght );
VaR BTN = this;
Document. onmousemove = function (e ){
VaR thisx = (E | window. Event). clientx; // the x-axis length value of the current moving position
VaR golenght = math. Min (maxlenght-1, math. Max (0, lenght + (thisx-X); // move the length
VaR leftval = (golenght/maxwidth) * 100;
BTN. style. Left = leftval + "%"; // usage percentage
Smallbar. style. Left = BTN. style. Left;
Smallwidth ();
Price (MinP, leftval );
Window. getselection ()? Window. getselection (). removeallranges (): Document. selection. Empty (); // you can check whether a selected item exists.
}
Document. onmouseup = new function ('this. onmousemove = null ');
}
Arrbtn [1]. onmousedown = function (e ){
VaR x = (E | window. Event). clientx;
VaR lenght = This. offsetleft + (this. offsetwidth/2 );
VaR btn1lenght = arrbtn [0]. offsetleft + (arrbtn [0]. offsetwidth/2 );
VaR minlenght = math. Max (0, btn1lenght );
VaR btn1 = this;
Document. onmousemove = function (e ){
VaR thisx = (E | window. Event). clientx;
VaR golenght = math. Max (minlenght-1, math. Min (maxwidth, lenght + (thisx-X )));
VaR leftval = (golenght/maxwidth) * 100;
Btn1.style. Left = leftval + "% ";
Smallwidth ();
Price (maxp, leftval );
Window. getselection ()? Window. getselection (). removeallranges (): Document. selection. Empty ();
}
Document. onmouseup = new function ('this. onmousemove = null ');
}
Function smallwidth (){
VaR left = parsefloat (arrbtn [0]. style. Left );
VaR right = parsefloat (arrbtn [1]. style. Left );
Smallbar. style. width = math. Floor (right-left) + "% ";
}
Function price (OBJ, leftval ){
VaR P = parseint (total/100) * leftval) + minprice;
If (P! = Minprice & P! = Maxprice) {P = P % 5> 3? P + (5-(P % 5): p-(P % 5 )}
OBJ. innerhtml = P + "Yuan ";
}
}

Demo address: http://cowll.com/demo/xijie2.html
I have updated the compatibility issues and poor operation experience in IE, and the code will not be repeated. You can view them in the demo!