如何在 JavaScript 中连续增加或减少值

Question

当鼠标单击并按住元素加号时，我想增加或减少值，它可以工作，但不能在鼠标按住时工作

 var salainv = document.getElementById("sala").value; var bodegainv = document.getElementById("bodega").value; function incrementar() { document.getElementById("sala").value = salainv++; document.getElementById("bodega").value = bodegainv--; } function decrementar() { document.getElementById("sala").value = salainv--; document.getElementById("bodega").value = bodegainv++; }

 <input type="number" name="bodega" id="bodega" value="15"> <input type="number" name="sala" id="sala" value="5"> <img src="https://cdn.pixabay.com/photo/2012/04/13/00/21/plus-31216_960_720.png" style="width: 40px;" onClick="incrementar()"> <img src="http://images.clipartpanda.com/minus-clipart-RTA7dagTL.png" style="width: 40px;" onClick="decrementar()">

有人可以帮助我在按下鼠标时使其工作吗？

谢谢。

Answer 1

您可以将setInterval与onMouseDown和onMouseUp事件一起使用，如下所示

 var salainv = document.getElementById("sala").value; var bodegainv = document.getElementById("bodega").value; var timerId; function incrementar() { document.getElementById("sala").value = salainv++; document.getElementById("bodega").value = bodegainv--; } function beginIncrementar(){ timerId = setInterval(incrementar,200); } function endIncrementar(){ clearInterval(timerId) } function decrementar() { document.getElementById("sala").value = salainv--; document.getElementById("bodega").value = bodegainv++; } function beginDecrementar(){ timerId = setInterval(decrementar,200); } function endDecrementar(){ clearInterval(timerId) }

 <input type="number" name="bodega" id="bodega" value="15"> <input type="number" name="sala" id="sala" value="5"> <img src="https://cdn.pixabay.com/photo/2012/04/13/00/21/plus-31216_960_720.png" style="width: 40px;" onClick="incrementar()" onMouseDown="beginIncrementar()" onMouseUp="endIncrementar()"> <img src="http://images.clipartpanda.com/minus-clipart-RTA7dagTL.png" style="width: 40px;" onClick="decrementar()" onMouseDown="beginDecrementar()" onMouseUp="endDecrementar()">

Answer 2

在onmousedown和onmouseup事件上使用setInterval()和clearInterval() 。 检查下面的例子。

 var salainv = document.getElementById("sala").value; var bodegainv = document.getElementById("bodega").value; var timer; function incrementar() { document.getElementById("sala").value = salainv++; document.getElementById("bodega").value = bodegainv--; } function decrementar() { document.getElementById("sala").value = salainv--; document.getElementById("bodega").value = bodegainv++; } function mouseDown(v) { if (v == 'inc') timer = setInterval(incrementar, 100); else timer = setInterval(decrementar, 100); } function mouseUp(v) { clearInterval(timer); timer = null; }

 <input type="number" name="bodega" id="bodega" value="15"> <input type="number" name="sala" id="sala" value="5"> <img src="https://cdn.pixabay.com/photo/2012/04/13/00/21/plus-31216_960_720.png" style="width: 40px;" onClick="incrementar()" onmousedown="mouseDown('inc')" onmouseup="mouseUp('inc')"> <img src="http://images.clipartpanda.com/minus-clipart-RTA7dagTL.png" style="width: 40px;" onClick="decrementar()" onmousedown="mouseDown('dec')" onmouseup="mouseUp('dec')">

Answer 3

为了更可靠地了解@Jamiec 的答案，我还添加了onMouseOut，因为当您启动 mouseDown（没有任何 mouseUp）并将鼠标移出触发器时，增量或减量将不再停止：

 var salainv = document.getElementById("sala").value; var bodegainv = document.getElementById("bodega").value; var timerId; function incrementar() { document.getElementById("sala").value = salainv++; document.getElementById("bodega").value = bodegainv--; } function beginIncrementar(){ timerId = setInterval(incrementar,200); } function endIncrementar(){ clearInterval(timerId) } function decrementar() { document.getElementById("sala").value = salainv--; document.getElementById("bodega").value = bodegainv++; } function beginDecrementar(){ timerId = setInterval(decrementar,200); } function endDecrementar(){ clearInterval(timerId) }

 a{ display:inline-block; border:1px solid #aaaaaa; padding:10px; }

 <input type="number" name="bodega" id="bodega" value="15"> <input type="number" name="sala" id="sala" value="5"> <a onMouseOut="endIncrementar()" onClick="incrementar()" onMouseDown="beginIncrementar()" onMouseUp="endIncrementar()">+</a> <a onMouseOut="endDecrementar()" onClick="decrementar()" onMouseDown="beginDecrementar()" onMouseUp="endDecrementar()">-</a>