使用 javascript 在 html 页面中构建微调器控件答案

【问题标题】：build a spinner controll in html page using javascript使用 javascript 在 html 页面中构建微调器控件
【发布时间】：2012-09-11 05:56:53
【问题描述】：

我想在我的页面中制作一个微调控件，我试过这样：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Simple spinner</title>

    <script type="text/javascript">
        function RotateSpinner(spinnerId, up) {
            var ele=document.getElementById(spinnerId);
            ele.value=parseInt(ele.value)+up;
                var t=setTimeout(function(){
                    if(window.rotate_start)
                        RotateSpinner(spinnerId,up);
                    else
                        clearTimeout(t);
                },500);

        }


    </script>

    <style>
        *
        {
            padding: 0;
            margin: 0;
        }
        .spinner
        {
            list-style: none;
            display: inline-block;
            line-height: 0;
            vertical-align: middle;
        }
        .spinner input
        {
            font-size: .45em;
            border-width: .5px;
            height: 1.5em;
            width: 2em;
        }
    </style>
</head>
<body>
    <input id="spinner" type="text" value="0" />
    <ul class="spinner">
        <li>
            <input type="button" value="&#9650;" onmousedown="window.rotate_start=true;RotateSpinner('spinner', 1)" onmouseup="window.rotate_start=false;"/>
        </li>
        <li>
            <input type="button" value="&#9660;" onmousedown="window.rotate_start=true;RotateSpinner('spinner', -1)" onmouseup="window.rotate_start=false;"/>
        </li>
    </ul>
</body>
</html>

但是，它并没有按我的意愿工作，当我单击“向上”按钮时，我希望该值只添加一次，但有时它会多次添加该值。

任何人都可以检查并修复它吗？

这里是live example

【问题讨论】：

投反对票的人能告诉我为什么吗？这个问题是不是太简单了？？还是我没有说清楚？？还是我发错地方了？？？
是的，我是通过google找到的，但我发现它确实允许连续递增。所以我尝试做一些修复，我使用了 settimeout，但它并没有像我预期的那样工作。
如果您点击按钮，然后在外面释放点击，onmousedown 将触发，但onmouseup 不会触发。您可以在两个按钮上尝试多次，以查看值是否疯狂。

标签： javascript spinner

【解决方案1】：

使用间隔可以大大缩短和简化代码。（在 IE9、Chrome21、FF14 上测试）我使用http://jsfiddle.net/KmMCE/3/ 进行测试，但我还没有更新示例。

标记：

    <input id="spinner" type="text" value="0" />
    <input type="button" value="&#9650;"
      onmousedown="spinnerMouseDown('spinner', 1);" 
onmouseup="stopSpinner();" onmouseout="stopSpinner();" />

    <input type="button" value="&#9660;"
      onmousedown="spinnerMouseDown('spinner', -1);" 
onmouseup="stopSpinner();" onmouseout="stopSpinner();" />

JavaScript：

function spinnerMouseDown(id, value) {
    var el = document.getElementById(id);
    window.spinnerTimer = window.setInterval(function(){
      el.value = parseInt(el.value) + value;
    }, 100);
}

function stopSpinner() {
    window.clearInterval(window.spinnerTimer);
}

【讨论】：

【解决方案2】：

这里有两个主要问题：

管理onmouseup 和onmousedown 事件。
- 您可以在按钮中获取onmousedown，如果onmouseup 在按钮之外，window.rotate_start 仍将是true。 onmouseup 和 onmousedown 单独不足以完成您想要的。
- 使用全局onmouseup 和onmousedown 事件处理程序来解决此问题，该处理程序将跟踪变量中的状态。保留其他变量以检查按钮上的 onmouseover 和 onmouseout 以了解是否更新值以及如何更新值 (+1/-1)。
单击时运行的超时会累积。这就是导致问题中描述的效果的原因。如果设置了超时，则使用将保持的变量，并在设置按钮的onmousedown 和onmouseover 时清除超时（即单击一次时，忘记所有挂起的计时器执行）。

在这个小提琴中看一个例子：http://jsfiddle.net/KmMCE/3/

<input type="button" value="▲" onmouseover="window.upfocus = 1;" onmouseout="window.upfocus = 0;" />

<input type="button" value="▼" onmouseover="window.downfocus = 1;" onmouseout="window.downfocus = 0;" />

var timingOut = false;
var upfocus = 0;
var downfocus = 0;
var mouseDown = 0;
document.body.onmousedown = function() {

    mouseDown = 1;
    if (window.upfocus == 1) {
        if (timingOut) {
            clearTimeout(t);
            timingOut = false;
        }
        RotateSpinner('spinner', 1);
    }
    else if (window.downfocus == 1) {
        if (timingOut) {
            clearTimeout(t);
            timingOut = false;
        }
        RotateSpinner('spinner', -1);
    }
}
document.body.onmouseup = function() {
    mouseDown = 0;
}

function RotateSpinner(spinnerId, up) {
    var ele = document.getElementById(spinnerId);
    ele.value = parseInt(ele.value) + up;
    timingOut = true;
    t = setTimeout(function() {
        if (mouseDown == 1 && up == 1 && window.upfocus == 1) {
            RotateSpinner(spinnerId, up);
        }
        else if (mouseDown == 1 && up == -1 && window.downfocus == 1) {
            RotateSpinner(spinnerId, up);
        }
        else {
            clearTimeout(t);
            timingOut = false;
        }
    }, 500);

}

【讨论】：

是的，这很有效。我想知道如果用户长时间按下“向上”按钮，我是否可以加快增量？
确实如此。您始终可以在 onmousedown 函数中设置超时，以增加在超时中使用的乘法因子。如果需要，如果达到特定限制，请清除超时。还要在onmouseup 中清除该因素和超时。
我的意思是使用 interval 而不是计时器来计算因子。看看更新的小提琴，它有这个因素加速工作：jsfiddle.net/KmMCE/10