JavaScript制作的SpinBox插件

浏览数：53 / 时间：2015年06月08日

今天用JavaScript写了一个SpinBox插件。先看一下效果吧：
技术分享

用法是这样的：


<!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>下面是一个Spin Box！</p>
    <p><div class="spinbox"></div></p>
    <div class="spinbox" value=‘50‘ min=‘45.9‘ max=‘51.2‘ step=‘0.1‘ fix=‘1‘ interval=‘100‘></div>
    <p><br/><br/>测试一段话看看！</p>
    <script src="spinbox.js"></script>
</body>
</html>

用法是：设置一个class=‘spinbox‘ 的div ，可以设置如下属性：

属性名称	意义	默认值
max	变化范围最大值	100
min	变化范围最小值	0
step	变化步长	1
fix	显示的小数点后的位数	0
interval	当鼠标一直按着按钮时，多少毫秒变化一次数字	300

spinbox.js代码如下：

(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;
}

}());