如何用JavaScript基于变量修改ID？模拟Arduino屏幕切换逻辑

嘿，我帮你把这个屏幕切换的测试逻辑补全并优化了，刚好能满足你要的循环切换需求，先看完整的可运行代码：

<p id='cool'></p>
<button id='plus' onclick='plus(); check()'>+</button>
<button id='sub' onclick='sub(); check()'>-</button>
<br>
<p id='show'></p>

<script>
// 初始化当前屏幕索引，0-7对应8个屏幕
let currentScreen = 0;
// 屏幕总数，方便后续修改
const totalScreens = 8;

function plus() {
  // 递增后取模，实现到7后回到0的循环
  currentScreen = (currentScreen + 1) % totalScreens;
}

function sub() {
  // 处理负数情况：先减1再加总数，再取模，实现到0后回到7的循环
  currentScreen = (currentScreen - 1 + totalScreens) % totalScreens;
}

function check() {
  // 更新页面显示当前激活的屏幕索引
  document.getElementById('show').textContent = `当前激活屏幕索引：${currentScreen}`;
}

// 页面加载时先显示初始状态
check();
</script>

关键逻辑说明 #

• 递增逻辑：用(currentScreen + 1) % totalScreens，当currentScreen为7时，7+1=8，8%8=0，完美实现循环回到第一个屏幕。
• 递减逻辑：因为JavaScript里负数取模会得到负数（比如0-1=-1，-1%8=-1），所以我们先加上totalScreens把数值拉回正数范围，再取模，确保0减1后能正确跳到7。
• 可维护性：把屏幕总数定义为常量totalScreens，后续如果要修改屏幕数量，只需要改这一个值就行，不用到处调整逻辑。

迁移到Arduino的注意事项 #

如果你要把这个逻辑搬到Arduino上，需要注意这几点：

• 把currentScreen定义为全局变量，方便在按钮中断或者主循环里访问修改。
• 按钮输入要处理防抖：可以用简单的delay()（适合快速原型），或者用状态机+时间戳的方式（更专业，不阻塞主循环）。
• LCD显示部分：可以把每个屏幕的内容存在字符串数组里，比如String screenContents[] = {"屏幕0内容", "屏幕1内容", ..., "屏幕7内容"};，然后根据currentScreen的值调用LCD的显示函数切换内容。

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