定时器重置关闭按钮一旦点击2秒后再回到“之前”状态

Question

嘿，我一直遇到一些困难，试图弄清楚如何将按钮重置回其先前状态一旦被点击。我知道这涉及到一个javascript计时，任何人都可以帮助我现在整个上午都在尝试。

    function clickMute()
    { if (document.Mute.src=='http://www.showandtell.com/TRUMusicControl/images/BeforeClickMute.png'){

    document.Mute.src='http://www.showandtell.com/TRUMusicControl/images/AfterClickMute.png';
    } 
    else if (document.Mute.src=='http://www.showandtell.com/TRUMusicControl/images/AfterClickMute.png'){

    document.Mute.src='http://www.showandtell.com/TRUMusicControl/images/BeforeClickMute.png';
    }
    }




    <div id= "Mute">
    <a href="#">
     <img id="Mutebutton" name="Mute" onclick="clickMute()" src="images/BeforeClickMute.png" width="140" height="126" />
    </a>

Answer 1

首先，删除图像周围的a（锚点）标记（静音按钮）。然后只需使用以下代码（替换您的函数）：

function clickMute(){
    var strPath = "http://www.showandtell.com/TRUMusicControl/images/",
        arrSrc = ["BeforeClickMute.png","AfterClickMute.png"],
        button = document.getElementById("Mutebutton"),
        index = (/Before/i.test(button.src)) ? 1 : 0;
    button.src = strPath + arrSrc[index];

    /* If you need the button to reset itself after a certain time... */
    if (index) setTimeout(clickMute,2000);
}