我正在编写一个网页，将温度从摄氏温度转换为华氏温度，反之亦然。在执行此操作时，如果温度处于一定程度，我需要显示一张图片，如果温度处于不同范围，我需要显示另一张图片(并且再显示一次)。我在正确的时间显示了正确的图片，但我似乎不知道如何让图片切换，相反，它们只是不断地累加。
<!DOCTYPE html>
<html>
<head>
<script>
function convertTemp(fAfter)
{
var c = document.getElementById('c'), f = document.getElementById('f');
var fAfter;
var cAfter
if(c.value != '')
{
f.value = (c.value * 9 / 5 + 32);
fAfter = (c.value * 9 / 5 + 32);
c.value = c.value;
return fAfter;
}
else
{
c.value = ((f.value - 32) * 5 / 9);
f.value = f.value;
fAfter = f.value;
return fAfter;
}
}
function changePicture()
{
var A = convertTemp();
if (A > 50)
{
var img = document.createElement('img');
img.src = "warm.gif";
document.body.appendChild(img);
}
else if (A < 50 & A > 32)
{
var img = document.createElement('img');
img.src = "cool.gif";
document.body.appendChild(img);
}
else
{
var img = document.createElement('img');
img.src = "cold.gif";
document.body.appendChild(img);
}
}
function clearBoth()
{
var c = document.getElementById('c');
c.value = '';
var f =document.getElementById('f');
f.value= '';
}
var button = document.getElementById("convert");
</script>
</head>
<body>
<input placeholder = "Celsius" id="c" onclick='clearBoth()' >°C</br>
<input placeholder = "Fahrenheit" id="f" onclick='clearBoth()' >°F</br>
<button type="button" id="convert" onclick="convertTemp() & changePicture()">Convert</button>
</body>
<p>
</p>
</html>
最佳答案
您可以创建一个在全局范围内可用的 img 并根据输入值更改其 src 属性。最初您可以隐藏图像。
HTML:
<body>
<input placeholder = "Celsius" id="c" onclick='clearBoth()' >°C</br>
<input placeholder = "Fahrenheit" id="f" onclick='clearBoth()' >°F</br>
<img src="" id="tempImage"/>
<button type="button" id="convert">Convert</button>
</body>
javaScript:
var img = document.getElementById("tempImage");
img.style.display = 'none';
function convertTemp(fAfter)
{
var c = document.getElementById('c'), f = document.getElementById('f');
var fAfter;
var cAfter
if(c.value != '')
{
f.value = (c.value * 9 / 5 + 32);
fAfter = (c.value * 9 / 5 + 32);
c.value = c.value;
return fAfter;
}
else
{
c.value = ((f.value - 32) * 5 / 9);
f.value = f.value;
fAfter = f.value;
return fAfter;
}
}
function changePicture()
{
var A = convertTemp();
img.style.display = '';
if (A > 50)
{
img.src = "http://3.bp.blogspot.com/-I5le-iONsuc/UDwY0gx6LMI/AAAAAAAAAnk/2VVq3KX7e2I/s1600/600px-Capital_C.png";
}
else if (A < 50 & A > 32)
{
img.src = "http://static.tumblr.com/148af423ee41cdb24507f372f95bd4d0/wuvn5qh/ovFmzk9sh/tumblr_static_f-word-1ha91xq.png";
}
else
{
img.src = "http://static.tumblr.com/148af423ee41cdb24507f372f95bd4d0/wuvn5qh/ovFmzk9sh/tumblr_static_f-word-1ha91xq.png";
}
}
function clearBoth()
{
var c = document.getElementById('c');
c.value = '';
var f =document.getElementById('f');
f.value= '';
}
var button = document.getElementById("convert");
button.onclick = changePicture;
关于javascript - 根据文本输入动态改变图片，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28803243/