频道栏目
首页 > 程序开发 > web前端 > JavaScript > 正文
JavaScript制作的SpinBox插件
2015-04-29 10:04:33         来源:pdcxs007的专栏  
收藏   我要投稿

今天用JavaScript写了一个SpinBox插件。先看一下效果吧:
这里写图片描述

用法是这样的:<??"/kf/ware/vc/" target="_blank" class="keylink">vcD4NCjxwcmUgY2xhc3M9"brush:java;">

下面是一个Spin Box!

 

 

 

 



测试一段话看看!

<script src="spinbox.js"></script>

用法是:设置一个class=&世界杯外围投注官网39;spinbox&世界杯外围投注官网39;p ,可以设置如下属性:

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

spinbox.js世界杯外围投注网站如下:

(function() {
var spinboxes = document.getElementsByClassName(&世界杯外围投注官网39;spinbox&世界杯外围投注官网39;);
for (var i = 0; i < spinboxes.length; ++i) {
    var value = parseFloat(spinboxes[i].getAttribute(&世界杯外围投注官网39;value&世界杯外围投注官网39;));
    if (isNaN(value)) {
        value = 0;
        spinboxes[i].setAttribute(&世界杯外围投注官网39;value&世界杯外围投注官网39;, &世界杯外围投注官网39;0&世界杯外围投注官网39;);
    }
    var max = parseFloat(spinboxes[i].getAttribute(&世界杯外围投注官网39;max&世界杯外围投注官网39;));
    if (isNaN(max))
        spinboxes[i].setAttribute(&世界杯外围投注官网39;max&世界杯外围投注官网39;, &世界杯外围投注官网39;100&世界杯外围投注官网39;);
    var min = parseFloat(spinboxes[i].getAttribute(&世界杯外围投注官网39;min&世界杯外围投注官网39;));
    if (isNaN(min))
        spinboxes[i].setAttribute(&世界杯外围投注官网39;min&世界杯外围投注官网39;, &世界杯外围投注官网39;0&世界杯外围投注官网39;);
    var step = parseFloat(spinboxes[i].getAttribute(&世界杯外围投注官网39;step&世界杯外围投注官网39;));
    if (isNaN(step))
        spinboxes[i].setAttribute(&世界杯外围投注官网39;step&世界杯外围投注官网39;, &世界杯外围投注官网39;1&世界杯外围投注官网39;);
    var fix = parseInt(spinboxes[i].getAttribute(&世界杯外围投注官网39;fix&世界杯外围投注官网39;));
    if (isNaN(fix))
        spinboxes[i].setAttribute(&世界杯外围投注官网39;fix&世界杯外围投注官网39;, &世界杯外围投注官网39;0&世界杯外围投注官网39;);
    var interval = parseInt(spinboxes[i].getAttribute(&世界杯外围投注官网39;interval&世界杯外围投注官网39;));
    if (isNaN(interval))
        spinboxes[i].setAttribute(&世界杯外围投注官网39;interval&世界杯外围投注官网39;, &世界杯外围投注官网39;300&世界杯外围投注官网39;);
    var left = document.createElement(&世界杯外围投注官网39;p&世界杯外围投注官网39;);
    left.style.width = &世界杯外围投注官网39;0&世界杯外围投注官网39;;
    left.style.height = &世界杯外围投注官网39;0&世界杯外围投注官网39;;
    left.style.borderTop = &世界杯外围投注官网39;12px solid transparent&世界杯外围投注官网39;;
    left.style.borderRight = &世界杯外围投注官网39;12px solid black&世界杯外围投注官网39;;
    left.style.borderBottom = &世界杯外围投注官网39;12px solid transparent&世界杯外围投注官网39;;
    left.style.float = &世界杯外围投注官网39;left&世界杯外围投注官网39;;
    left.style.marginRight = &世界杯外围投注官网39;2px&世界杯外围投注官网39;;
    spinboxes[i].appendChild(left);
    var input = document.createElement(&世界杯外围投注官网39;input&世界杯外围投注官网39;);
    input.innerHTML = &世界杯外围投注官网39;0&世界杯外围投注官网39;;
    input.value = value.toFixed(fix);
    input.readOnly = true;
    input.style.float = &世界杯外围投注官网39;left&世界杯外围投注官网39;;
    input.style.width = &世界杯外围投注官网39;40px&世界杯外围投注官网39;;
    input.style.textAlign = &世界杯外围投注官网39;center&世界杯外围投注官网39;;
    input.style.fontSize = &世界杯外围投注官网39;14px&世界杯外围投注官网39;;
    spinboxes[i].appendChild(input);
    var right = document.createElement(&世界杯外围投注官网39;p&世界杯外围投注官网39;);
    right.style.width = &世界杯外围投注官网39;0&世界杯外围投注官网39;;
    right.style.height = &世界杯外围投注官网39;0&世界杯外围投注官网39;;
    right.style.borderTop = &世界杯外围投注官网39;12px solid transparent&世界杯外围投注官网39;;
    right.style.borderLeft = &世界杯外围投注官网39;12px solid black&世界杯外围投注官网39;;
    right.style.borderBottom = &世界杯外围投注官网39;12px solid transparent&世界杯外围投注官网39;;
    right.style.float = &世界杯外围投注官网39;left&世界杯外围投注官网39;;
    right.style.marginRight = &世界杯外围投注官网39;20px&世界杯外围投注官网39;;
    right.style.marginLeft = &世界杯外围投注官网39;2px&世界杯外围投注官网39;;
    spinboxes[i].appendChild(right);
    spinboxes[i].isDown = false;
    left.addEventListener(&世界杯外围投注官网39;mousedown&世界杯外围投注官网39;, leftClick, false);
    right.addEventListener(&世界杯外围投注官网39;mousedown&世界杯外围投注官网39;, rightClick, false);
    left.addEventListener(&世界杯外围投注官网39;mouseup&世界杯外围投注官网39;, mouseUp, false);
    right.addEventListener(&世界杯外围投注官网39;mouseup&世界杯外围投注官网39;, mouseUp, false);
    left.addEventListener(&世界杯外围投注官网39;mouseout&世界杯外围投注官网39;, mouseUp, false);
    right.addEventListener(&世界杯外围投注官网39;mouseout&世界杯外围投注官网39;, mouseUp, false);
}
function leftClick(event) {
    var input = event.target.nextSibling;
    var parent = input.parentNode;
    var min = parseFloat(parent.getAttribute(&世界杯外围投注官网39;min&世界杯外围投注官网39;));
    var value = parseFloat(parent.getAttribute(&世界杯外围投注官网39;value&世界杯外围投注官网39;));
    var fix = parseInt(parent.getAttribute(&世界杯外围投注官网39;fix&世界杯外围投注官网39;));
    var step = parseFloat(parent.getAttribute(&世界杯外围投注官网39;step&世界杯外围投注官网39;));
    var interval = parseInt(parent.getAttribute(&世界杯外围投注官网39;interval&世界杯外围投注官网39;));
    parent.isDown = true;
    (function downLoop() {
        if (value > min && parent.isDown) {
            setTimeout(downLoop, interval);
            value -= step;
            input.value = value.toFixed(fix);
            parent.setAttribute(&世界杯外围投注官网39;value&世界杯外围投注官网39;, value + &世界杯外围投注官网39;&世界杯外围投注官网39;);
        }
    })();
}
function rightClick(event) {
    var input = event.target.previousSibling;
    var parent = input.parentNode;
    var max = parseFloat(parent.getAttribute(&世界杯外围投注官网39;max&世界杯外围投注官网39;));
    var value = parseFloat(parent.getAttribute(&世界杯外围投注官网39;value&世界杯外围投注官网39;));
    var fix = parseInt(parent.getAttribute(&世界杯外围投注官网39;fix&世界杯外围投注官网39;));
    var step = parseFloat(parent.getAttribute(&世界杯外围投注官网39;step&世界杯外围投注官网39;));
    var interval = parseInt(parent.getAttribute(&世界杯外围投注官网39;interval&世界杯外围投注官网39;));
    parent.isDown = true;
    (function upLoop() {
        if (value < max && parent.isDown) {
            setTimeout(upLoop, interval);
            value += step;
            input.value = value.toFixed(fix);
            parent.setAttribute(&世界杯外围投注官网39;value&世界杯外围投注官网39;, value + &世界杯外围投注官网39;&世界杯外围投注官网39;);
        }
    })();
}
function mouseUp(event) {
    event.target.parentNode.isDown = false;
}
}());
点击复制链接 与好友分享!回本站首页
相关TAG标签 插件
上一篇:AngularJS交互学习教程推荐
下一篇:js面向对象学习笔记之三(Array 对象)
相关文章
图文推荐
点击排行

关于我们 | 联系我们 | 服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑--致力于做实用的IT技术学习网站

世界杯外围投注官网