需要这些样式的面板在数据输入后更改颜色

Question

因此，我为我的大学研究小组工作，正在创建一个带有GUI的程序，该程序将使原子层沉积系统的生长过程自动化。我有一个带有“编辑”按钮的“加热”面板，当您单击“编辑”时，它将带您进入具有12个不同加热区域的其他12个面板的另一个页面。这些区域具有用于设置所需温度的输入字段，并且我希望在将温度放入正确参数后，这些面板/盒子可以更改颜色。 因此，假设您只能将温度设置在50-120摄氏度之间，如果用户输入“ 115”，我希望面板变成绿色，如果用户输入“ 40”，我希望面板变成红色。 另外，我希望包含这12个面板的主“加热”面板在达到温度后即可更改颜色。 最好的方法是什么？我不是专业程序员，我们使用Electron，HTML，CSS，JS和Vue.JS来创建此程序

这些是程序的2个屏幕截图，在第一个屏幕上，您可以看到标有“加热”的面板，在第二个图像上，您可以看到标有1-14个区域的12个区域。

一个：

两个：

Answer 1

答案

将数字输入框（<input type='number'>）与

一起使用

• min：范围的最小值
• max：范围的最大值
• value：开头的值。
• required：不能为空

---

<input id="temp" type="number" value="1" min="0" max="100" required>

---

然后，您可以使用CSS选择器（input:valid和input:invalid）来调整输入框本身或调整诸如span之类的兄弟元素：

---

示例：

具有同级跨度：

input:invalid + span:after {
  content: '✖';
  padding-left: 5px;
  color: red;
}

input:valid + span:after {
  content: '✓';
  padding-left: 5px;
  color: green;
}

    <label for="temp">Temp between 0 and 100:</label>
    <input id="temp" type="number" value="1" min="0" max="100" required>
    <span></span>

---

具有输入样式：

---

input {
padding: 10px;
font-weight: bolder;
font-size:1.3em;
font-family: monospace;
border: dashed 3px black;
width: 30%;
text-align: center;
}
input:invalid {
  background: rgba(100,0,0,.3);
  color: black;
}

input:valid {
background: rgba(0, 200,0,.3);
  color: black;
}

<label for="temp">Temp between 0 and 100:</label>
    <input id="temp" type="number" value="1" min="0" max="100" required>
    <span></span>