代码之家 › 专栏 › 技术社区 › Tom

HTML:如何根据两个文本值之间的数字差异有条件地显示图像?

html javascript

Tom · 技术社区 · 4 年前

我对HTML和javascript非常陌生。经过几天的工作,我已经想出了一个网页,将读取一个CSV文件,并显示结果。CSV文件包含来自气象站的数据。有很多东西要学。以下是网页代码:

<!doctype html>
<html lang="en">

<style>
    body {
            background-color: black;
            color: azure;
            font-size: 1.1em;
      }
    h1 {
        color: coral;
    }

</style>

<head>
    <meta charset="utf-8">
    <title>Weather Station</title>
</head>
<script>
    setInterval(connectWeatherStation, 1000);
    function connectWeatherStation(){
        fetch('data.csv') <!-- REPLACE WITH YOUR IP ADDRESS -->
        .then(response => response.text())
        .then(text => {
            var data = text.split(",");
            document.getElementById("ir_ambient").innerHTML = "IR Ambient: " + data[0];
            document.getElementById("sky_temperature").innerHTML = "IR Sky: " + data[1];
            document.getElementById("temperature").innerHTML = "Temperature: " + data[2];
            document.getElementById("humidity").innerHTML = "Humidity: " + data[3];
            document.getElementById("rain_status").innerHTML = "Rain Status: " + data[4];

            var clockElement = document.getElementById( "clock" );
            clock.innerHTML = new Date().toLocaleTimeString();
        })
    }


</script>

    <body onload="connectWeatherStation()">
        <div>
            <h1>Weather Data</h1>
            <h3 id="clock">?</h3>
            <h2 id="ir_ambient">?</h2>
            <h2 id="sky_temperature">?</h2>
            <h2 id="temperature">?</h2>
            <h2 id="humidity">?</h2>
        <h2 id="rain_status">?</h2>
        </div>
    </body>
</html>

元素sky_temperature和元素ir_ambient是文本值。我想把它们转换成浮标,然后从天空温度中减去ir_ambient。如果差值超过20,我想显示一个jpeg文件,如果小于20,则显示另一个jpeg文件。我的问题是,我不知道该怎么做,甚至不知道该把它放在身体部位的什么地方。谢谢你的洞察力。

1 回复 | 直到 4 年前

code99 4 年前

可以在可见性设置为“隐藏”的情况下将图像嵌入到主体中。在脚本中,有条件地设置可见性。

<!doctype html>
<html lang="en">

<style>
    body {
            background-color: black;
            color: azure;
            font-size: 1.1em;
      }
    h1 {
        color: coral;
    }

</style>

<head>
    <meta charset="utf-8">
    <title>Weather Station</title>
</head>
<script>
    setInterval(connectWeatherStation, 1000);
    function connectWeatherStation(){
        fetch('data.csv') <!-- REPLACE WITH YOUR IP ADDRESS -->
        .then(response => response.text())
        .then(text => {
            var data = text.split(",");
            document.getElementById("ir_ambient").innerHTML = "IR Ambient: " + data[0];
            document.getElementById("sky_temperature").innerHTML = "IR Sky: " + data[1];
            document.getElementById("temperature").innerHTML = "Temperature: " + data[2];
            document.getElementById("humidity").innerHTML = "Humidity: " + data[3];
            document.getElementById("rain_status").innerHTML = "Rain Status: " + data[4];

            var clockElement = document.getElementById( "clock" );
            clock.innerHTML = new Date().toLocaleTimeString();

            // new code
            var irAmbient = parseFloat(data[0]);
            var skyTemperature = parseFloat(data[1]);
            if (skyTemperature-irAmbient > 20) {
                  
               document.getElementById("myImage").style.visibility = "visible";
            } else {
               document.getElementById("myImage").style.visibility = "hidden";

            }
        })
    }


</script>

    <body onload="connectWeatherStation()">
        <div>
            <h1>Weather Data</h1>
            <h3 id="clock">?</h3>
            <h2 id="ir_ambient">?</h2>
            <h2 id="sky_temperature">?</h2>
            <h2 id="temperature">?</h2>
            <h2 id="humidity">?</h2>
            <h2 id="rain_status">?</h2>
            
            <!--- new code --->
            <img id=myImage src="path-to-img" style="visibility: hidden;" />
        </div>
    </body>
</html>

Mister Jojo Åukasz Daniel Mastalerz 4 年前

我会这样做,让它更干净:

#img-selector img:first-of-type         { display:inline }
#img-selector img:last-of-type          { display:none   }
#img-selector.imgLess img:first-of-type { display:none   }
#img-selector.imgLess img:last-of-type  { display:inline }

<div id="img-selector">
  <img src="image_more.jpg" alt="image 1">
  <img src="image_less.jpg" alt="image 2">
</div>
<div>
  <h1>Weather Data</h1>
  <h3 id="clock"            > --/--/-- </h3>
  <h2 id="ir_ambient"       >IR Ambient:  <span> ? </span></h2>
  <h2 id="sky_temperature"  >IR Sky:      <span> ? </span></h2>
  <h2 id="temperature"      >Temperature: <span> ? </span></h2>
  <h2 id="humidity"         >Humidity:    <span> ? </span></h2>
  <h2 id="rain_status"      >Rain Status: <span> ? </span></h2>
</div>

const
  IP_Address_csv = 'data.csv'          //  REPLACE WITH YOUR IP ADDRESS  
, imgSelector    = document.querySelector('#img-selector')
, clock          = document.querySelector('#clock')
, irAmbient      = document.querySelector('#ir_ambient span')
, skyTemperature = document.querySelector('#sky_temperature  span')
, temperature    = document.querySelector('#temperature span')
, humidity       = document.querySelector('#humidity span')
, rainStatus     = document.querySelector('#rain_status span')
  ;

fetch(IP_Address_csv)
.then( resp => resp.text())
.then( text =>
  {
  let [ irAmbientVal, skyTemperatureVal, temperatureVal, humidityVal, ir_ambientVal ]
    = text.split(',').map(v=>isNaN(v)?v:Number(v) )

  irAmbient.textContent      = irAmbientVal
  skyTemperature.textContent = skyTemperatureVal
  temperature.textContent    = temperatureVal
  humidity.textContent       = humidityVal
  humidity.textContent       = ir_ambientVal

  clock.textContent =  new Date().toLocaleTimeString()

  imgSelector.classList.toggle('imgLess', (skyTemperatureVal - ir_ambientVal) < 21)
  })