如何在 javascript 中使用 mouseup 触发倒计时

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 … 依此类推，现在我想在松开鼠标按钮后将其动画化回第一张图像。

Answer 1

您可以使用两个 setInterval，一个只是为了 increase/decrease，另一个只是为了减少：

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

如何在 javascript 中使用 mouseup 触发倒计时

How to use mouseup to trigger countdown in javascript

javascript

mouseevent

countdown