Javascript 点击后将按钮图像更改为“加载”，10秒后再更改另一个图像_Javascript_Html

Javascript 点击后将按钮图像更改为“加载”，10秒后再更改另一个图像

javascript html

Javascript 点击后将按钮图像更改为“加载”，10秒后再更改另一个图像,javascript,html,Javascript,Html,我一整天都在为此而挣扎，我的代码已经到了一点都不工作的地步！我想做的是：当用户单击ImageButton1时，该图像将替换为另一个加载Img的图像，然后在10秒钟后，该图像将替换为另一个图像/按钮ImageButton2 这是我的非功能代码： <img src="images/xboxsite_14.gif" id="ImageButton1" onClick="showLoad()"> <img src="images/getld.png" id="ImageButton

我一整天都在为此而挣扎，我的代码已经到了一点都不工作的地步！我想做的是：

当用户单击ImageButton1时，该图像将替换为另一个加载Img的图像，然后在10秒钟后，该图像将替换为另一个图像/按钮ImageButton2

这是我的非功能代码：

<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>

我能想到的唯一一件事是，我将字符集从'charset=iso-8859-1'更改为'charset=UTF-8'，因为我随机得到了一个'unsupported characters'错误—没有

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

我理清了你的逻辑。。

这很有效

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org      /TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>


<script  language="javascript">  

function showLoad() {   

 document.getElementById('ImageButton1').src = '';
 document.getElementById('LoadingImg').src = 'images/Loader.gif';
 setTimeout(swapImageSrc, 10000);
}

function swapImageSrc() {
 document.getElementById('LoadingImg').src = '';    
 document.getElementById('ImageButton2').src = 'images/getld.png';
 document.getElementById('Code1String').style.display='block';
}

</script>
</head>

<body>

<img src="images/xboxsite_14.gif" id="ImageButton1" onclick="showLoad()">
<img src="" id="ImageButton2">
<img src="" id="LoadingImg">

</body>
</html>

当然，我可能是错的，但这可能是您所追求的，更干净的代码可能会帮助您调试问题：

<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>

当你说你的代码不起作用时，你是什么意思？您在调试器中看到了哪些错误？超时设置为1000，即1秒，而不是1000秒10@jmort253-整件事，当按下图像“ImageButton1”时，什么也没有发生。@Elvis-是的，对不起，我只是将其设置为该值进行测试，而不是每次测试都等待10秒。控制台中是否显示任何错误？谢谢，但是，当我试图保存/编译代码时，当绝对没有特殊字符时，会出现错误“当前编码的文档无法保存文档中的所有字符”。它也在上面代码的某个地方，因为如果我删除该代码，它会“保存”得很好。我想这是因为当您直接从这里复制并保存时……用于标记代码的特殊字符“会出现问题。”。复制并粘贴到记事本中。然后从记事本复制到你的编辑器中。如果你发现不需要的瓷砖，就把它们去掉。如果消息传来，请继续保存。代码对你有用吗？我在firefox中进行了测试，测试成功后，C&P将代码添加到dreamweaver中的一个新文件bug中。函数showLoad{document.getElementById'ImageButton1'.src=document.getElementById'LoadingImg'.src；setTimeoutswapImageSrc，10000；}函数swapImageSrc{document.getElementById'ImageButton1'.src=document.getElementById'ImageButton2'.src；document.getElementById'Code1String'.style.display='block'；}这是我现在的代码，“ImageButton2”不是一个“新按钮”，它与“Imagebutton1”一样，有一个新的图像源。你知道有什么方法可以使它成为自己的“元素/按钮”吗？谢谢

<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>