SpinBox plug-in made by JavaScript

SpinBox plug-in made by JavaScript

Today, I wrote a SpinBox plug-in JavaScript. Let's take a look at the results first:

The usage is as follows: <喎?http: www.bkjia.com kf ware vc " target="_blank" class="keylink"> VcD4NCjxwcmUgY2xhc3M9 "brush: java;">

Below is a Spin Box!

 

 

 

 

Test a paragraph to see!

<script src="spinbox.js"></script>

Usage: Setclass='spinbox'OfdivYou can set the following attributes:

Attribute name	Meaning	Default Value
Max	Maximum variation range	100
Min	Minimum Variation Range	0
Step	Change step size	1
Fix	Number of digits after the decimal point	0
Interval	How many milliseconds does the number change when the mouse keeps pressing the button?	300

The code for spinbox. js is as follows:

(function() {var spinboxes = document.getElementsByClassName('spinbox');for (var i = 0; i < spinboxes.length; ++i) {    var value = parseFloat(spinboxes[i].getAttribute('value'));    if (isNaN(value)) {        value = 0;        spinboxes[i].setAttribute('value', '0');    }    var max = parseFloat(spinboxes[i].getAttribute('max'));    if (isNaN(max))        spinboxes[i].setAttribute('max', '100');    var min = parseFloat(spinboxes[i].getAttribute('min'));    if (isNaN(min))        spinboxes[i].setAttribute('min', '0');    var step = parseFloat(spinboxes[i].getAttribute('step'));    if (isNaN(step))        spinboxes[i].setAttribute('step', '1');    var fix = parseInt(spinboxes[i].getAttribute('fix'));    if (isNaN(fix))        spinboxes[i].setAttribute('fix', '0');    var interval = parseInt(spinboxes[i].getAttribute('interval'));    if (isNaN(interval))        spinboxes[i].setAttribute('interval', '300');    var left = 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);    var input = 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);    var right = 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) {    var input = event.target.nextSibling;    var parent = input.parentNode;    var min = parseFloat(parent.getAttribute('min'));    var value = parseFloat(parent.getAttribute('value'));    var fix = parseInt(parent.getAttribute('fix'));    var step = parseFloat(parent.getAttribute('step'));    var interval = 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) {    var input = event.target.previousSibling;    var parent = input.parentNode;    var max = parseFloat(parent.getAttribute('max'));    var value = parseFloat(parent.getAttribute('value'));    var fix = parseInt(parent.getAttribute('fix'));    var step = parseFloat(parent.getAttribute('step'));    var interval = 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;}}());