如何增加或連續在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事件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

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