如何通过JS变量值无交互修改WebApp页面元素（适配Arduino场景）

云上老周

2026-8-16

解决方案

核心思路

不需要点击元素就能更新页面内容，关键是定时检测变量值（或实时获取Arduino数据），直接操作DOM修改页面元素的内容即可。下面分别给出jQuery和原生JavaScript的实现方案，你可以根据需求选择。

步骤1：准备页面显示元素

先在HTML里添加一个用来展示状态消息的元素：

<div id="status-message"></div>

步骤2：jQuery实现（适配你当前需求）

用setInterval定时生成模拟的光照值（后续替换成Arduino的真实数据），然后通过条件判断更新页面内容：

// 定时模拟获取Arduino输入（每秒更新一次）
setInterval(function() {
  // 生成0-200的随机数模拟光照值，后续替换为Arduino的真实数据
  let light = Math.floor(Math.random() * 201);
  // 选中页面上的消息元素
  const $message = $('#status-message');

  // 根据光照值更新内容
  if (light > 100) {
    $message.text('your plant is happy');
  } else {
    $message.text('your plant needs more light'); // 可选：添加低光照提示
  }
}, 1000);

关键代码说明：

setInterval：每隔指定时间（这里是1秒）自动执行一次函数，无需用户触发点击
$('#status-message')：jQuery选择器，快速定位页面元素
.text()：直接修改元素的文本内容，实现页面动态更新

步骤3：原生JavaScript实现（无需依赖jQuery）

如果不想用jQuery，原生JS也能实现同样效果：

setInterval(function() {
  let light = Math.floor(Math.random() * 201);
  const messageElement = document.getElementById('status-message');

  if (light > 100) {
    messageElement.textContent = 'your plant is happy';
  } else {
    messageElement.textContent = 'your plant needs more light';
  }
}, 1000);