Question

我正在写一个网页，我正在将温度从摄氏温度转换为华氏温度，反之亦然。在这样做的同时，如果温度在一定程度上我需要显示图片，如果它在不同的范围内，我需要显示另一张图片（还有一次）。我在正确的时间显示了正确的图片，但我似乎无法弄清楚如何让图片切换，而是他们只是不断加起来。

<!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()' >&#176C</br>
<input placeholder = "Fahrenheit" id="f" onclick='clearBoth()' >&#176F</br>
<button type="button" id="convert" onclick="convertTemp() & changePicture()">Convert</button>
</body>
<p>

</p>
</html>

Answer 1

您可以创建全局范围内可用的img，并根据输入值更改其src属性。最初，您可以隐藏图像。

HTML：

<body>
    <input placeholder = "Celsius" id="c" onclick='clearBoth()' >&#176C</br>
    <input placeholder = "Fahrenheit" id="f" onclick='clearBoth()' >&#176F</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;

jsFiddle

根据文本输入动态更改图片

1 个答案: