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