Question

＆＃13;

<!DOCTYPE html>
<html>
<head>
    <title>Arduino ajax LED Button Control</title>
    <script>
            var sensor_val = 0;
            
           function GetArduinoIO()
	{
		nocache = "&nocache=" + Math.random() * 1000000;
		var request = new XMLHttpRequest();
		request.onreadystatechange = function()
		{
			if (this.readyState == 4) {
				if (this.status == 200) {
					if (this.responseXML != null) 
                                             {
						// XML file received - contains analog values, switch values and LED states
						var count;
                                                   
                        //sensor value read
                                                    document.getElementById("sensor").innerHTML =
                                                             this.responseXML.getElementsByTagName('sensor')[0].childNodes[0].nodeValue;
sensor_val = this.responseXML.getElementsByTagName('sensor')[0].childNodes[0].nodeValue;
					            }
                                           }          						
				}
			}
		}
		// send HTTP GET request with LEDs to switch on/off if any
		request.open("GET", "ajax_inputs" +  nocache, true);
		request.send(null);
		setTimeout('GetArduinoIO()', 1000);
		             
            }
</script>
<style>
	.IO_box {
		float: left;
		margin: 0 20px 20px 0;
		border: 1px solid blue;
		padding: 0 5px 0 5px;
		width: 120px;
	}
	h1 {
		font-size: 120%;
		color: blue;
		margin: 0 0 10px 0;
	}
	h2 {
		font-size: 85%;
		color: #5734E6;
		margin: 5px 0 5px 0;
	}
	p, form, button {
		font-size: 80%;
		color: #252525;
	}
	.small_text {
		font-size: 70%;
		color: #737373;
	}
</style>
</head>
<body onload="GetArduinoIO()">
    <h1>Arduino >>>TISHITU<<< LED Button "IOT"</h1>
	        <div class="IO_box">
                     <h2>sensor value</h2>
                     <p> A0: <span id="sensor">...</span></p>
            </div>
            <table border=3px width=50% cellpadding=10>
              <tr>
                 <td id="r1" bgcolor="#FFFFFF">0-10%</td>
                
              </tr>
            </table>
</body>
</html>

＆＃13;

我正在研究物联网，我想将表格单元格的颜色改为红色，如果来自arduino的传入值，即sensor_val介于200到300之间。我的html代码如下。请告诉我应该如何申请sensor_val的条件改变表格的单元格的颜色，即id为＆＃34; r1＆＃34;的td。

Answer 1

只需将其添加到代码的相关部分即可。

if(sensor_val>=200 && sensor_val<=300){
document.getElementById("sensor").style.backgroundColor='red';
}

我会添加到您的代码段中，但它无效...

如何根据来自arduino的特定模拟值更改表格单元格的背景颜色

1 个答案: