[英]Hide button for few seconds onclick
我想禁用单击按钮几秒钟,并在此期间显示图像,然后隐藏图像并再次显示按钮。
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);
}
问题:
不会在onclick上执行此js代码,但是在调用此按钮的操作后(使用JSF 2)
调用此代码后,按钮将被隐藏并显示图像,但是再也不会被隐藏,并且按钮也不会再次显示。
请提出解决方法。
您实际上是在隐藏按钮并在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);
}
也许你是说
setTimeout (function(){
myButton.style.display ='none';
setTimeout (function(){
setTimeout (function(){
myButton.style.display ='none';
},5000);
myImage.style.display ='inline';
},5000);
},5000);
您添加的代码仅用于隐藏按钮和显示图像。 该函数应如下所示:
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);
}
细微调整:
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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.