如何使用Ajax根据返回的传感器数值动态调整展示文本的字体颜色

该需求可以直接实现，仅需在原有AJAX获取数据的逻辑中新增数值判断、动态修改字体颜色的代码即可，具体修改如下：

核心修改逻辑 #

• 将接口返回的文本内容转换为数字类型，避免字符串比较出现逻辑错误
• 根据你给出的规则判断对应颜色，通过DOM元素的style.color属性修改字体颜色

完整修改后代码 #

<p style="color:blue; position: absolute; top: 810px; width: 100px; padding-left: 340px;" id="ofen_VL">0</p>
<script>
setInterval(function() {
  // 每10秒调用一次获取数据的方法
  getData();
}, 10000);

function getData() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      // 转换为数字，去除首尾空白字符避免解析错误
      const sensorValue = Number(this.responseText.trim())
      const targetEle = document.getElementById("ofen_VL")
      // 赋值数值
      targetEle.innerHTML = sensorValue
      // 动态修改颜色
      targetEle.style.color = sensorValue < 50 ? 'blue' : 'red'
    }
  };
  xhttp.open("GET", "ofen_VL.txt", true);
  xhttp.send();
}
</script>

可选优化 #

如果返回的文本可能存在非数字内容，可以新增异常判断逻辑，避免转换失败后样式异常。

内容的提问来源于stack exchange，提问作者Sebastian Heyn