javascript - 使用javascript在html页面中建立一个微调控件

我想在页面中进行微调控件，我尝试过这样的操作：

<!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

最佳答案

这里有两个主要问题：

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);

}