javascript - 单击时隐藏按钮几秒钟

Question

我想禁用点击按钮几秒钟，并在此期间显示图像，然后隐藏图像并再次显示按钮。

HTML:

<input type="submit" value="Submit" onclick="validate();" name="myButton" id="myButton">  
<img style="display: none;" src="/images/loading.gif" id="myImage">

JavaScript:

function validate(){

var  myButton= document.getElementById('myButton');
var  myImage= document.getElementById('myImage');

                        setTimeout (function(){
                          myButton.style.display ='none';
                        },5000);
                      setTimeout (function(){
                          myImage.style.display ='inline';
                        },5000);
}

问题:

1. 此 js 代码不是在单击时执行，而是在调用此按钮的操作之后执行(使用 JSF 2)

2. 调用此代码时，按钮会隐藏，图像会出现，但不会再次隐藏，并且按钮不会再次显示。

请告知如何解决该问题。

Answer 1

您实际上隐藏了按钮并在 5 秒后显示图像，然后不再将其更改回来。试试这个:

function validate(){

    var myButton= document.getElementById('myButton');
    var myImage= document.getElementById('myImage');

    myButton.style.display ='none';
    myImage.style.display ='inline';

    setTimeout (function(){
        myButton.style.display ='inline';
        myImage.style.display ='none';
    },5000);

}