我正在尝试与我的 friend 一起制作一个将摄氏度转换为华氏度的网站。我们目前拥有它,因此您可以在一个框中输入数字,然后从另一个单元的另一个框中显示出来。
如果输入的摄氏度或华氏度高于或低于某个数字,我们希望页面改变颜色。
谢谢你的帮助:)
当前代码:
<p><input id="c" onkeyup="convert('C')"> degrees Celsius</p>
<p><input id="f" onkeyup="convert('F')"> degrees Fahrenheit</p>
<script>
function convert(degree) {
var x;
if (degree == "C") {
x = document.getElementById("c").value * 9 / 5 + 32;
document.getElementById("f").value = Math.round(x);
} else {
x = (document.getElementById("f").value -32) * 5 / 9;
document.getElementById("c").value = Math.round(x);
}
}
</script>
</body>
</html>
最佳答案
<meter>
温度计
我假设您正在制作温度计。看到这个 link 有关如何将属性值同步到 CSS 的详细信息 background-color
HTML
标签
HTML5
<meter>
标签是一个理想的元素。更改了
<input type="text">
至<input type="number">
仪表属性
max="140"
min="-51"
high="99"
100℃ H2O的沸点-金变红low="1"
0℃ H2O的凝固点-金变红optimum="23"
23℃室温
JavaScript
已更改
keyup
事件到input
事件,因为它更快并且专门用于<input>
标签。添加一行到 JavaScript 以控制
<meter>
标签:thermo.value = t.c.value;
如果应用于 OP 代码,则等效为:
document.getElementById('thermo').value = document.getElementById("c").value
if/else if/else
条件设置范围为 15.5℃ 至 26.5℃(60℉ 至 80℉) - 该范围由.comfortable
设计类(class)。 绿色到金色。
演示
#case {
margin: 20px 40px 40px;
transform: rotate(-90deg);
width: fit-content;
}
#case label {
transform: rotate(90deg);
transform-origin: 53% 531%;
height: 20px;
width: 200px;
}
label {
display: block
}
#thermo {
width: 200px
}
meter::-webkit-meter-bar {
background: #e6e6e9;
}
meter::-webkit-meter-optimum-value {
background: gold;
}
meter.comfortable::-webkit-meter-optimum-value {
background: green;
}
meter::-webkit-meter-suboptimum-value {
background: red;
}
meter::-moz-meter-bar {
background: #e6e6e9;
}
meter::-moz-meter-optimum-value {
background: gold;
}
meter.comfortable::-moz-meter-optimum-value {
background: green;
}
meter::-moz-meter-suboptimum-value {
background: red;
}
#thermo {
background: green;
}
<form id='temp'>
<label><input id="c" oninput="convert('C')" type='number' max='140' min='-51' value='23'> ℃</label><br>
<label><input id="f" oninput="convert('F')" type='number' max='290' min='-60' value='75'> ℉</label>
<fieldset id='case'>
<label for='thermo' data-max='140' data-min='-55' class='C'>℃</label>
<meter id='thermo' max='140' high='99' low='1' min='-55' value='23' optimum='23' class='comfortable'></meter>
<label for='thermo' data-max='290' data-min='-60' class='F'>℉</label>
</fieldset>
</form>
<script>
var temp = document.forms.temp;
var t = temp.elements;
var thermo = document.getElementById('thermo');
function convert(degree) {
var x;
if (degree === "C") {
x = t.c.value * 9 / 5 + 32;
t.f.value = Math.round(x);
} else {
x = (t.f.value - 32) * 5 / 9;
t.c.value = Math.round(x);
}
thermo.value = t.c.value;
if (thermo.value >= 15.5 && thermo.value <= 26.5 && !thermo.classList.contains('comfortable')) {
thermo.classList.add('comfortable');
return false;
} else if (thermo.value < 15.5 || thermo.value > 26.5 && thermo.classList.contains('comfortable')) {
thermo.classList.remove('comfortable');
return false;
} else {
return false;
}
}
</script>
关于javascript - 如何根据用户输入和算法更改背景颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51251577/