Home > Developer > JavaScript
Today, I wrote a Spinbox plugin with JavaScript. Let's take a look at the effect:
The usage is this:
<! DOCTYPE html><html lang="ZH-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="Width=device-width, Initial-scale=1 "> <title>Test HTML for the Spinbox</title></head><body> <p>Here is a spin box!</P> <p><div class="Spinbox"></div></P> <div class="Spinbox" value=' min' = '45.9 ' max= '51.2 ' step=' 0.1 ' fix=' 1 ' interval =' > '</div> <p><br/><br/>Test a passage and see!</P> <script src="Spinbox.js"></script></body></html>The usage is: set class=‘spinbox‘ one div , you can set the following properties:
| Property name | meaning | Default Value |
|---|---|---|
| Max | Maximum range of variation | 100 |
| Min | Minimum variation Range | 0 |
| Step | Change Step | 1 |
| Fix | The number of digits after the decimal point displayed | 0 |
| Interval | How many milliseconds change the number once the mouse has pressed the button | 300 |
The Spinbox.js code is as follows:
( function() {varSpinboxes = Document.getelementsbyclassname (' Spinbox '); for(vari =0; i < spinboxes.length; ++i) {varValue =parsefloat(Spinboxes[i].getattribute (' value '));if(IsNaN(value)) {value =0; Spinboxes[i].setattribute (' value ',' 0 '); }varMax =parsefloat(Spinboxes[i].getattribute (' Max '));if(IsNaN(max)) Spinboxes[i].setattribute (' Max ',' + ');varMin =parsefloat(Spinboxes[i].getattribute (' min '));if(IsNaN(min)) Spinboxes[i].setattribute (' min ',' 0 ');varStep =parsefloat(Spinboxes[i].getattribute (' Step '));if(IsNaN(step)) Spinboxes[i].setattribute (' Step ',' 1 ');varfix =parseint(Spinboxes[i].getattribute (' Fix '));if(IsNaN(fix)) Spinboxes[i].setattribute (' Fix ',' 0 ');varInterval =parseint(Spinboxes[i].getattribute (' interval '));if(IsNaN(interval)) Spinboxes[i].setattribute (' interval ',' + ');varleft = Document.createelement (' div '); Left.style.width =' 0 '; Left.style.height =' 0 '; Left.style.borderTop =' 12px solid Transparent '; Left.style.borderRight =' 12px solid black '; Left.style.borderBottom =' 12px solid Transparent '; Left.style.float =' left '; Left.style.marginRight =' 2px '; Spinboxes[i].appendchild (left);varinput = Document.createelement (' input '); input.innerhtml =' 0 '; Input.value = value.tofixed (fix); Input.readonly =true; Input.style.float =' left '; Input.style.width =' 40px '; Input.style.textAlign =' Center '; Input.style.fontSize =' 14px '; Spinboxes[i].appendchild (input);varright = Document.createelement (' div '); Right.style.width =' 0 '; Right.style.height =' 0 '; Right.style.borderTop =' 12px solid Transparent '; Right.style.borderLeft =' 12px solid black '; Right.style.borderBottom =' 12px solid Transparent '; Right.style.float =' left '; Right.style.marginRight =' 20px '; Right.style.marginLeft =' 2px '; Spinboxes[i].appendchild (right); Spinboxes[i].isdown =false; Left.addeventlistener (' MouseDown ', Leftclick,false); Right.addeventlistener (' MouseDown ', RightClick,false); Left.addeventlistener (' MouseUp ', MouseUp,false); Right.addeventlistener (' MouseUp ', MouseUp,false); Left.addeventlistener (' Mouseout ', MouseUp,false); Right.addeventlistener (' Mouseout ', MouseUp,false);} function leftclick(event) { varinput = event.target.nextSibling;varparent = Input.parentnode;varMin =parsefloat(Parent.getattribute (' min '));varValue =parsefloat(Parent.getattribute (' value '));varfix =parseint(Parent.getattribute (' Fix '));varStep =parsefloat(Parent.getattribute (' Step '));varInterval =parseint(Parent.getattribute (' interval ')); Parent.isdown =true; ( function downloop() { if(Value > Min && parent.isdown) {setTimeout (downloop, interval); Value-= step; Input.value = value.tofixed (fix); Parent.setattribute (' value ', Value +"'); } })();} function rightclick(event) { varinput = event.target.previousSibling;varparent = Input.parentnode;varMax =parsefloat(Parent.getattribute (' Max '));varValue =parsefloat(Parent.getattribute (' value '));varfix =parseint(Parent.getattribute (' Fix '));varStep =parsefloat(Parent.getattribute (' Step '));varInterval =parseint(Parent.getattribute (' interval ')); Parent.isdown =true; ( function uploop() { if(Value < max && Parent.isdown) {setTimeout (uploop, interval); Value + = step; Input.value = value.tofixed (fix); Parent.setattribute (' value ', Value +"'); } })();} function mouseUp(event) {Event.target.parentNode.isDown =false;}} ());JavaScript-made Spinbox plugins
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
