在点击“加载”后更改按钮图片然后在10秒后与另一个图像 [英] Change button image after click to "loading" and then with another image after 10 seconds

问题描述

一直都在苦苦挣扎，而我已经到了代码根本不工作的地步！
我想要做的是：

当用户点击 ImageButton1 时，该图像是替换为另一个图像 LoadingImg ，然后在10秒后，该图像被替换为另一个图像/按钮 ImageButton2

以下是我的非功能代码：

 < img src = images / xboxsite_14.gifid =ImageButton1onClick =showLoad（）> 
< img src =images / getld.pngid =ImageButton2alt =获取最后的数字style =display：none;> 
< img src =images / Loader.gifid =LoadingImgstyle =display：none;> 
 
< script type =text / javascriptlanguage =javascript> 
 $ b $ function showLoad（）{
 document.getElementById（'ImageButton1'）。src = document.getElementById（'LoadingImg'）。src; 
 document.getElementById（'LoadingImg'）。style.display ='block'; 
 setTimeout（swapImageSrc，1000）; 
 
 $ b函数swapImageSrc（）{
 document.getElementById（'LoadingImg'）。src = document.getElementById（'ImageButton2'）。src; 
 document.getElementById（'LoadingImg'）。style.display ='none'; 
 document.getElementById（'ImageButton2'）。style.display ='block'; 
 document.getElementById（'Code1String'）。style.display ='block'; 
} 
 
< / script> 
  

我唯一能想到的就是我将字符集从'charset = iso-8859- 1'到'charset = UTF-8'，因为我得到了一个'不支持的字符'的错误随机（没有）。

如果有人能解决这个问题，我会非常感谢，谢谢！

解决方案

我当然可能是错的，但是这可能是因为你在做什么，清洁的代码可能会帮助您调试您的问题：

 < img src =images / xboxsite_14.gifid =ImageButton1的onClick = 动作（）; > 
 
< script type =text / javascriptlanguage =javascript> 
 
 function action（）
 {
 swapImage（'images / getld.png'）; 
 window.setTimeout（function（）
 {
 swapImage（'images / Loader.gif'）
}，1000）
}; 
 
 
 var swapImage = function（src）
 {
 document.getElementById（ImageButton1）。src = src; 
} 
 
 
< / script> 
  

Been struggling all day with this, and I've got to the point where my code isn't working at all! What I'm trying to do is:

When the user clicks ImageButton1, that image is replaced with another image LoadingImg, and then after 10 seconds, that image is replaced with another image/button ImageButton2

Here is my non-functional code:

<img src="images/xboxsite_14.gif" id="ImageButton1" onClick="showLoad()">
<img src="images/getld.png" id="ImageButton2" alt="Get Last Digits" style="display:none;">
<img src="images/Loader.gif" id="LoadingImg" style="display:none;">

<script type="text/javascript" language="javascript">  

function showLoad() {
    document.getElementById('ImageButton1').src=document.getElementById('LoadingImg').src;
    document.getElementById('LoadingImg').style.display='block';
    setTimeout(swapImageSrc, 1000);
}​

function swapImageSrc() {
    document.getElementById('LoadingImg').src = document.getElementById('ImageButton2').src;
    document.getElementById('LoadingImg').style.display='none';
    document.getElementById('ImageButton2').style.display='block';
    document.getElementById('Code1String').style.display='block';
}

</script>

The only thing I can think of is that I changed the charset from 'charset=iso-8859-1' to 'charset=UTF-8' because I got a 'unsupported characters' error randomly (there are none).

If anyone can fix this then I will be extremely grateful, thanks!

解决方案

I might be wrong of course, but could it be that this is what you are after, a cleaner code might help you debug your issue:

<img src="images/xboxsite_14.gif" id="ImageButton1" onClick="action();">

<script type="text/javascript" language="javascript">  

function action()
{
swapImage('images/getld.png') ;
window.setTimeout(function ()
{
swapImage('images/Loader.gif') 
}, 1000)
};


var swapImage = function(src)
{
    document.getElementById("ImageButton1").src = src;
}


</script>

这篇关于在点击“加载”后更改按钮图片然后在10秒后与另一个图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！