Question

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

＆＃13;

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++;
}

＆＃13;

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

＆＃13;

当按下鼠标时，有人可以帮助我使它工作吗？

感谢。

Answer 1

您可以使用下面演示的setInterval以及onMouseDown和onMouseUp个活动

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

使用setInterval()和clearInterval() 在onmousedown和onmouseup事件中。请查看以下示例。

＆＃13;

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

＆＃13;

<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')">

＆＃13;

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>

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

3 个答案: