如何使用mouseup觸發javascript中的倒計時

Question

我想從mouseup上的任意給定數字中數到0，以便爲img標記的src屬性生成動畫。

var count = 0, 
    direction = 1, 
    image = document.getElementById('myImage'), 
    mousedownID = -1; 

function mousedown(event) { 
    if(mousedownID==-1) 
     mousedownID = setInterval(whilemousedown, 150); 
} 

function mouseup(event) { 
    if(mousedownID!=-1) { 
     mousedownID = setInterval(after, 150); 
     clearInterval(mousedownID); 
     mousedownID=-1; 
    } 
} 

function whilemousedown() { 
    image.src = "block-" + count + ".png"; 

    count += direction; 
    direction *= (((count % 11) == 0) ? -1 : 1); 
} 

function after() { 
    image.src = "block-" + count + ".png"; 
    count = count - 1; 
    if(count = 0){ 
     clearInterval(mousedownID); 
    } 
} 

document.addEventListener("mousedown", mousedown); 
document.addEventListener("mouseup", mouseup); 
document.addEventListener("mouseout", mouseup); 

當點擊鼠標時，被動畫12張圖像，1 ... 12 ... 1 ... 12 ...等等，現在我想製作動畫回到第一的形象，一旦我發佈的mousebutton。

Answer 1

您可以使用兩種setInterval的，一個只是爲了增加/減少，而另一個只是爲了減少：

var limit = 11, 
    count = 0, 
    direction = -1, 
    image = document.getElementById('myImage'), 
    mousedownID = -1, 
    mouseupID = -1; 

function mousedown(event) { 
    if(mousedownID == -1) { 
     if (mouseupID != -1) { 
      clearInterval(mouseupID); 
      mouseupID = -1; 
     } 

     mousedownID = setInterval(whilemousedown, 150); 
    } 
} 

function mouseup(event) { 
    if(mousedownID != -1) { 
     clearInterval(mousedownID); 
     mousedownID = -1; 

     if (mouseupID == -1) { 
      direction = -1; // delete this if you prefer 
      mouseupID = setInterval(after, 150); 
     } 
    } 
} 

function whilemousedown() { 
    image.src = "block-" + count + ".png"; 

    if (count == 0) { 
     direction = +1; 
    } else if (count == limit) { 
     direction = -1; 
    } 

    count += direction; 
} 

function after() { 
    if (count == 0) { 
     clearInterval(mouseupID); 
     mouseupID = -1; 
     return; 
    } 

    count = count - 1; 
    image.src = "block-" + count + ".png"; 
} 

document.addEventListener("mousedown", mousedown); 
document.addEventListener("mouseup", mouseup); 
document.addEventListener("mouseout", mouseup);