javascript - 在 标签中混淆

Question

谁能帮我理解 2 米的区别以及为什么它们之间的颜色 差异，尽管它们具有相同 值??

<meter low="69" high="80" max="100" value="84">A</meter><span>MDN example</span> <br>

<meter low="30" high="80" max="100" value="84">B</meter>

Answer 1

那是因为低值和高值不同。

现在meter标签形成三个区域:

一个从 min(0) 到 low，另一个从 low 到 high，第三个从 high 到 max(100)。

optimum 的默认值为 50。您可以将其设置为任何您想要的值。现在，在任何区域中，最佳位置是绿色。相邻区域为黄色，最远的区域为红色。

在第一个示例中，默认最佳值为 50。如果我设置 low=60 和 high=80，则 0 到 60 之间的任何值都将为绿色，介于60 到 80 为黄色，80 到 100 为红色。

在第二个示例中，我设置了 optimum=70，保持低值和高值相同。然后 0 到 60 之间的任何东西都是黄色的，60 到 80 之间的东西是绿色的，80 到 100 之间的东西是黄色的。

<p>First exmple</p>
<meter low="60" high="80" max="100" value="34">A</meter><br/>
<meter low="60" high="80" max="100" value="65">B</meter><br/>
<meter low="60" high="80" max="100" value="84">C</meter><br/>
<p>Second exmple</p>
<meter low="60" high="80" optimum="70" max="100" value="34">A</meter><br/>
<meter low="60" high="80" optimum="70" max="100" value="65">B</meter><br/>
<meter low="60" high="80" optimum="70" max="100" value="84">C</meter><br/>