JavaScript制作的SpinBox插件

来源：互联网发布：攻壳机动队95知乎编辑：程序博客网时间：2024/06/16 23:15

今天用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>    <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;}}());

0 0