我想在点击几秒钟时禁用按钮,并在此期间显示图像,然后隐藏图像并再次显示该按钮。
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);
}
问题:
此js代码未执行onclick,但在调用此按钮的操作后(使用JSF 2)
调用此代码时,按钮会隐藏并显示图像,但永远不会再次隐藏,并且按钮不会再次显示。
请告知如何解决这个问题。
答案 0 :(得分:4)
您实际上是在隐藏按钮并在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);
}
答案 1 :(得分:1)
也许你的意思是
setTimeout (function(){
myButton.style.display ='none';
setTimeout (function(){
setTimeout (function(){
myButton.style.display ='none';
},5000);
myImage.style.display ='inline';
},5000);
},5000);
答案 2 :(得分:0)
您添加的代码仅用于隐藏按钮并显示图像。该函数应如下所示:
function validate(){
var myButton= document.getElementById('myButton');
var myImage= document.getElementById('myImage');
var hide_timeout = 5000; // delay 5 sec before hide button;
var show_timeout = 10000; // delay 10 sec before show button;
setTimeout (function(){
myButton.style.display ='none';
myImage.style.display ='inline';
},hide_timeout);
setTimeout (function(){
myButton.style.display ='inline';
myImage.style.display ='none';
},show_timeout);
}
答案 3 :(得分:0)
小调整:
function validate() {
var myButton= document.getElementById('myButton');
var myImage= document.getElementById('myImage');
myButton.style.visibility='hidden';
myImage.style.display ='inline';
setTimeout (function(){
myImage.style.display ='none';
myButton.style.visibility ='visible';
},5000);
return false;
}