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

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

javascript

使用javascript在html页面中构建微调器控件,javascript,spinner,Javascript,Spinner,我想在我的页面中创建一个微调器控件，我尝试了如下操作： <!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

我想在我的页面中创建一个微调器控件，我尝试了如下操作：

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


简易纺纱机
函数旋转内部（喷丝头，向上）{
var ele=document.getElementById（spinnerId）；
ele.value=parseInt（ele.value）+up；
var t=setTimeout（函数（）{
如果（窗口旋转\开始）
旋转内（喷丝头，向上）；
其他的
清除超时（t）；
},500);
}
*
{
填充：0；
保证金：0；
}
斯宾纳先生
{
列表样式：无；
显示：内联块；
线高：0；
垂直对齐：中间对齐；
}
.微调器输入
{
字体大小：.45em；
边框宽度：.5px；
高度：1.5em；
宽度：2米；
}

但是，它并没有像我想要的那样工作，当我点击“向上”按钮时，我只想添加一次值，但有时它会多次添加值

谁能检查一下并修理一下吗

以下是问题所在这里有两个主要问题：

管理
```
onmouseup
```
和
```
onmouseudown
```
事件
- 您可以在按钮中获得一个
```
onmousedown
```
  ，如果
```
onmousedup
```
  在按钮外，
```
窗口。rotate\u start
```
  仍将是
```
true
```
```
onmouseup
```
  和
```
onmouseudown
```
  单靠这两种方式是不足以完成您想要的任务的
- 通过使用跟踪变量状态的全局
```
onmouseup
```
  和
```
onmouseudown
```
  事件处理程序来解决此问题。保留其他变量以检查按钮上的
```
onmouseover
```
  和
```
onmouseout
```
  ，以了解何时更新值以及如何更新（+1/-1）
执行单次单击时运行的超时累积。这就是问题中描述的影响的原因。如果设置了超时，则使用一个将保持不变的变量，并在设置按钮的
```
onmousedown
```
和
```
onmouseover
```
时清除超时（即，单击一次，忘记所有挂起的计时器执行）

请参阅此小提琴中的一个示例：

这里有两个主要问题：

管理
```
onmouseup
```
和
```
onmouseudown
```
事件
- 您可以在按钮中获得一个
```
onmousedown
```
  ，如果
```
onmousedup
```
  在按钮外，
```
窗口。rotate\u start
```
  仍将是
```
true
```
```
onmouseup
```
  和
```
onmouseudown
```
  单靠这两种方式是不足以完成您想要的任务的
- 通过使用跟踪变量状态的全局
```
onmouseup
```
  和
```
onmouseudown
```
  事件处理程序来解决此问题。保留其他变量以检查按钮上的
```
onmouseover
```
  和
```
onmouseout
```
  ，以了解何时更新值以及如何更新（+1/-1）
执行单次单击时运行的超时累积。这就是问题中描述的影响的原因。如果设置了超时，则使用一个将保持不变的变量，并在设置按钮的
```
onmousedown
```
和
```
onmouseover
```
时清除超时（即，单击一次，忘记所有挂起的计时器执行）

请参阅此小提琴中的一个示例：

使用间隔可以大大缩短和简化代码。（在IE9、Chrome21、FF14上测试）我用过测试，但我还没有更新样本

标记：

    <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();" />

使用间隔可以大大缩短和简化代码。（在IE9、Chrome21、FF14上测试）我用过测试，但我还没有更新样本

标记：

    <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();" />

投票否决我职位的人能告诉我为什么吗？这个问题太简单了吗？？还是我没说清楚？？或者我把它放错地方了？？？是的，我是通过谷歌找到的，但我发现它确实允许不断增加。所以我试着做了一些修复，我使用了settimeout，但它并没有像我预期的那样工作。如果你点击按钮，然后释放外部的点击，

onmousedown

将触发，但是

onmouseup

不会。你可以在两个按钮上试几次，看看值是否疯狂。投票否决我帖子的人可以告诉我为什么？这个问题太简单了吗？？还是我没说清楚？？或者我把它放错地方了？？？是的，我是通过谷歌找到的，但我发现它确实允许不断增加。所以我试着做了一些修复，我使用了settimeout，但它并没有像我预期的那样工作。如果你点击按钮，然后释放外部的点击，

onmousedown

将触发，但是

onmouseup

不会。你可以在两个按钮上尝试几次，看看值是否疯狂。是的，thsi有效。我想知道如果用户长时间按下“向上”按钮，我是否可以加快增量？确实如此。您始终可以在

onmousedown

函数中设置超时，以增加超时中使用的倍增因子。如果达到特定限制（如果需要），请清除超时。还要清除mouseup中的因数和超时。我的意思是使用

间隔来代替计时器来计算因数。看看更新后的提琴，它有一个因素加速工作：是的，thsi工作。我想知道如果用户长时间按“向上”按钮，我是否可以加快增量？确实如此。您始终可以在onmousedown
函数中设置超时，以增加超时中使用的倍增因子。如果达到特定限制（如果需要），请清除超时。另外，还要清除onmouseup中的因子和超时。我指的是我们
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);
}