将变量赋给img src

时间:2014-06-24 12:01:40

标签: javascript html image variables src

我有一个我无法编辑的变量,名为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,我希望有人能指出我正确的方向。

3 个答案:

答案 0 :(得分: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

答案 1 :(得分:1)

它的setinterval

setInterval(updateChart, 5000);

每次 5s 后,它会调用updateChartupdateChart

中更新此内容
x = parseInt(document.getElementById("reg0001").value,10);

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

更新值

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

根据OP需要改进方式

JS

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 

答案 2 :(得分:0)

我建议你这样做

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来获取值