JavaScript制作的SpinBox插件

今天用JavaScript写了一个SpinBox插件。先看一下效果吧:
JavaScript制作的SpinBox插件_第1张图片

用法是这样的:

<!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>
    <div>
    <div id="spin" class="spinbox"></div>
    <div value='50' min='45.9' max='51.2' step='0.1' class='spinbox' fix='1' interval='100'></div>
    </div>
    <div style="margin-top:60px"><p>测试一段话看看!</p></div>
    <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 b = spinboxes[i];
    b.style.display = "webkit-flex";
    b.style.display = "inline-flex";
    b.style.alignItems = "center";

    var value = parseFloat(b.getAttribute('value'));
    if (isNaN(value)) {
        value = 0;
        b.setAttribute('value', '0');
    }

    var max = parseFloat(b.getAttribute('max'));
    if (isNaN(max))
        b.setAttribute('max', '100');

    var min = parseFloat(b.getAttribute('min'));
    if (isNaN(min))
        b.setAttribute('min', '0');

    var step = parseFloat(b.getAttribute('step'));
    if (isNaN(step))
        b.setAttribute('step', '1');

    var fix = parseInt(b.getAttribute('fix'));
    if (isNaN(fix))
        b.setAttribute('fix', '0');

    var interval = parseInt(b.getAttribute('interval'));
    if (isNaN(interval))
        b.setAttribute('interval', '300');

    var left = document.createElement('div');
    left.style.width = '0';
    left.style.height = '0';
    left.style.borderTop = '13px solid transparent';
    left.style.borderRight = '13px solid black';
    left.style.borderBottom = '13px solid transparent';
    left.style.marginRight = '2px';
    b.appendChild(left);

    var input = document.createElement('input');
    input.innerHTML = '0';
    input.value = value.toFixed(fix);
    input.readOnly = true;
    input.style.width = '40px';
    input.style.textAlign = 'center';
    input.style.fontSize = '14px';
    b.appendChild(input);

    var right = document.createElement('div');
    right.style.width = '0';
    right.style.height = '0';
    right.style.borderTop = '13px solid transparent';
    right.style.borderLeft = '13px solid black';
    right.style.borderBottom = '13px solid transparent';
    right.style.marginLeft = '2px';
    b.appendChild(right);
    b.isDown = false;

    left.addEventListener('mousedown', leftClick, false);
    right.addEventListener('mousedown', rightClick, false);
    left.addEventListener('touchstart', leftClick, false);
    right.addEventListener('touchstart', rightClick, false);
    left.addEventListener('mouseup', mouseUp, false);
    right.addEventListener('mouseup', mouseUp, false);
    left.addEventListener('mouseout', mouseUp, false);
    right.addEventListener('mouseout', mouseUp, false);
    left.addEventListener('touchend', mouseUp, false);
    right.addEventListener('touchend', 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;
}

}());

你可能感兴趣的:(JavaScript,html,插件,Spin-Box)