标签：javascript spin-box 插件
今天用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;
}
}());
标签：javascript spin-box 插件
原文地址：http://blog.csdn.net/pdcxs007/article/details/45340619
