Question

构建嵌入式Web服务器

到目前为止，我已经写了这段代码

<HTML> 
    <HEAD>
        <SCRIPT LANGUAGE=JavaScript>
            function swapImage() {
                var val1 = "~Value1~"
                val1=Number(val1);
                intImage = val1;
                switch (intImage) {
                    case 0:
                    IMG1.src = "off.jpg";
                    return(false);
                    case 1:
                    IMG1.src = "on.jpg";
                    return(false);   
                }
                setTimeout("swapImage()",500)
            }
            swapImage()
        </SCRIPT>
    </HEAD>
    <BODY>
        <body onload="swapImage()">
        <IMG id="IMG1" name="IMG1" src="on.jpg">
    </BODY>
</HTML>

通过对Nano WiReach SMT的一些AT + i命令我可以改变~Value1~内容，并且通过发送“0”和“1”我不能改变图像。现在，为了更改图像，我必须始终通过浏览器重新加载页面.. 我想知道无论如何在某个指定的时间段内自动执行该操作，或者当Value1更改而不重新加载孔页时更好。也许把它放在一个div并重新加载div内容但我不知道如何.. 最后一件事......在网上搜索我发现类似于jquery的东西......我不能使用jquery因为libs对我的uC非常大..

谢谢

Answer 1

您是否遗漏了以下内容？

var IMG1 = window.document.getElementById("IMG1");

Also does your function need a name?

!function() {
  var val1 = "~Value1~"
  val1=Number(val1);
  var intImage = val1;
  var IMG1 = window.document.getElementById('IMG1');
  switch (intImage) {
    case 0:
      IMG1.src = "off.jpg";
      return(false);
    case 1:
      IMG1.src = "on.jpg";
      return(false);
  }
  setTimeout(arguments.callee, 500);
}();


It's better to send a function to setTimeout instead of a string, otherwise
the string eval is performed on the string in the global context - not always what you want.

Answer 2

我没有测试过这段代码，也不确定你的平台，但是你可能想要预先加载图片，另外通过id引用body中的元素来改变它的来源。

<HTML> 
<HEAD>
<SCRIPT LANGUAGE=JavaScript>

var IMG1 = new Image();
IMG1.src = "on.jpg";

var IMG2 = new Image();
IMG2.src = "off.jpg";

function swapImage() {

var oIMG = document.getElementById("IMG1");


var val1 = "~Value1~"

val1=Number(val1);

intImage = val1;

switch (intImage) {

case 0:

oIMG.src = IMG2.src;

return(false);

case 1:

oIMG.src = IMG1.src;

return(false);   

}

 setTimeout("swapImage()",500)

}



</SCRIPT>

</HEAD>

<BODY>

<body onload="swapImage()">

<IMG id="IMG1" name="IMG1" src="on.jpg">

</BODY>
</HTML>

在我们检查模块并使用〜等插入内容之前。让我们确保我们可以做一个工作得很好的基本脚本。您可以在普通浏览器中加载以下内容，并且每隔500毫秒来回切换图像。 setInterval导致函数每500毫秒调用一次，setTimeout只调用一次。使用你想要的。

在尝试其他内容之前，看看你是否可以使这个基本脚本正常工作。如果您有任何疑问，请询问任何问题。

<!DOCTYPE html>
<html>

<head>
<title>Image Test</title>

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


var IMG1 = new Image(); // create new image
var IMG2 = new Image(); // crete another new image

function init() {


IMG1.src = "on.jpg"; // preload on.jpg
IMG2.src = "off.jpg"; // preload off.jpg

var oIMG = document.getElementById("oIMG"); // grab a reference to img in doc with id of oIMG

oIMG.src = IMG1.src; // initially set the source of oIMG to IMG1's source
oIMG.toggled = 1; // initially give oIMG a toggled state of 1 (meaning on)

setInterval("swapImage()",500); //start time out for swapping image

}

function swapImage() {


var oIMG = document.getElementById("oIMG"); // grab a reference to img in doc with id of oIMG

switch (oIMG.toggled) { //switch based on the oIMG toggle state

case 0: //if off, turn it on
oIMG.src = IMG1.src;
oIMG.toggled = 1;
break;

case 1: //if on, turn it off
oIMG.src = IMG2.src;
oIMG.toggled = 0;
break;
}





}


window.onload = init;
</script>

</head>

<body>

<img id="oIMG" src="" />


</body>

</html>

更新javascript函数而不重新加载

2 个答案: