同时,鼠标按下

时间:2013-04-12 18:22:26

标签: javascript dom

我需要解决这个问题。

当在最大按钮上按下鼠标按钮时,变量max应该增加1。当我按下min按钮时,max变量应该减少,但它对我不起作用。

如何让它发挥作用?

<body>


<button id="max" onmousedown="max()" >max</button>
<input id="num" type="number" disabled="disabled" value="0">
<button id="min" onmousedown="min()">min</button>

<script type="text/javascript">

function max()
{
  var x = document.getElementById("num").value
  if (x<100) {var max= document.getElementById("num").value++;}
}

function min()
{
  var x = document.getElementById("num").value
  if (x>0) {var max= document.getElementById("num").value--;}
}

</script>

</body>

2 个答案:

答案 0 :(得分:0)

这应该有用。

function max()
{
    var numElement = document.getElementById("num");
    var x= numElement.value
    var fnc = function ()
    {
        if (x<100){
        document.getElementById("num").value = x;
        x++;
    }    
    var i = setInterval(fnc, 100);
    fnc(); 
    document.onmouseup = function ()
    {
        clearInterval(i);
    }
}   


function min()
{
    var numElement = document.getElementById("num");
    var x= numElement.value
    var fnc = function ()
    {
        if (x>0){
        document.getElementById("num").value = x;
        x--;
    }    
    var i = setInterval(fnc, 100);
    fnc(); 
    document.onmouseup = function ()
    {
        clearInterval(i);
    }
}   

答案 1 :(得分:0)

EXAMPLE

一些事情:

1 - 我已从输入标签中删除了内联事件。

2 - 为了使间隔正常工作,您需要引用该过程。在我的示例minIntervalmaxInterval中,我可以致电clearInterval onmouseup

3 - 为了使这些工作正常,您需要在DOM加载/准备好后运行脚本,因此请将代码放在body标记的末尾附近。

4 - speed的值基本上是您希望间隔运行的速度。

<强> HTML

<button id="max" >max</button>
<input id="num" type="number" disabled="disabled" value="0">
<button id="min">min</button>

<强>的JavaScript

var min = document.getElementById("min"),
    max = document.getElementById("max"),
    num = document.getElementById("num"),
    speed = 10,
    minInterval, maxInterval;

min.onmousedown = function(){

    minInterval = setInterval(function(){
        num.value--;
    }, speed);
};

min.onmouseup = function(){
    clearInterval(minInterval);
};

max.onmousedown = function(){
    maxInterval = setInterval(function(){
       num.value++;
    }, speed);
};

max.onmouseup = function(){
    clearInterval(maxInterval);
};

有用的链接:

setInterval

clearInterval