将变量分配给 img src答案

【问题标题】：assign variable to img src将变量分配给 img src
【发布时间】：2014-08-14 16:28:11
【问题描述】：

我有一个无法编辑的变量，名为 reg0001，它来自我正在使用的板上的固件。 reg0001 是 0 或 1，我想制作一个实时更新的页面，如果 reg0001 为 0，则显示绿色 img，如果为 1，则显示红色。这是我目前所拥有的。

<div id="Oobj6"style="position:absolute;left:270px;top:60px;width:20px;height:53px;overflow:hidden;">
<input type="text" id="Gform4" class="Body-C" name="reg0001" value="%d" >
<div>
<img id="Ggeo1" src="whitelight.jpg" alt="" name="state1">
</div>

和javascript：

function updateChart() {
    var x;
    if (isIE) { // for Internet Explorer

    x = parseInt(document.getElementById("reg0001").value);
    if (x == 0) { 
        document.state1.src = "greenlight.jpg";
        }
    else {
        document.state1.src = "redlight.jpg";
    }

现在这个脚本可以工作，但我必须不断刷新页面才能改变图像，即使 reg0001 在后台发生了变化。我对javascript不太了解，我希望有人能指出我正确的方向。

【问题讨论】：

setInterval(updateChart, 1000)?这将每秒调用您的函数。但是您的输入字段是如何更新的呢？

标签： javascript html image variables src

【解决方案1】：

你需要用SetInterval循环它：

 updateChart();
 setInterval(updateChart, 5000); //Cycles every 5 seconds

如果需要管理循环，可以记录SetInterval生成的区间Id：

 var intervalId = setInterval(function().... //Mindful about the scope of intervalId here!

然后你可以用clearInterval停止循环：

 clearInterval(intervalId);

参考：https://developer.mozilla.org/en/docs/Web/API/window.setInterval

【讨论】：

@putvande 这是一个复制粘贴的答案！原始代码有多个语句，我需要将其包装在一个函数中。

【解决方案2】：

为它设置间隔

setInterval(updateChart, 5000);

它会在每 5s
之后调用 updateChart 在您的 updateChart 中更新此内容

x = parseInt(document.getElementById("reg0001").value,10);

或

x = Number(document.getElementById("reg0001").value);

更新值

document.getElementById("reg0001").value="2"

根据 OP 需要更好的方法

setInterval(updateChart, 5000);
var x=true;
function updateChart() {

    if (isIE) { // for Internet Explorer
    if (x) { 
        document.state1.src = "greenlight.jpg";
        x=false; 
        }
    else {
        document.state1.src = "redlight.jpg";
        x=false; 
        }
    }
}
//no need for getting any value if you just want animation

【讨论】：

我刚刚添加了这个，但它似乎仍然没有改变。我还需要更新我的输入字段吗？
@user3768868 你也可以不输入字段值，查看更新的代码

【解决方案3】：

我建议你这样做

var tId;
window.onload=function() {
  tId = setInterval(function() {
    var x = parseInt(document.getElementById("reg0001").value,10);
    document.state1.src = x == 0?"greenlight.jpg":"redlight.jpg";
  },5000);
}

如果您不从其他地方更新字段 reg0001，则没有任何意义。所以也许你需要使用 AJAX 来获取值

【讨论】：