1

Tengo 6 iconos de diferentes climas: , nublado, soleado,con rayos etc, lo que necesito es que dependiendo de la temperatura cambie el icono,como puedo hacer la condición en el ajax, este código va en medio de la condición document.getElementsByClassName("img").src = "iconos/soleado.png";, ya la temperatura esta en tiempo real, como lo puedo hacer?

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>pieza clima</title>
    <link rel="stylesheet" href="index.css" type="text/css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <META HTTP-EQUIV="REFRESH" CONTENT="30;">

</head>
<body>

       
        <video autoplay muted loop id="myVideo">
                <source src="Videos/viento2.mp4" type="video/mp4">
        </video>
      <div id="contenido">
      <div id="content-text"></div>
      <div id="content-text2"></div>
<script>

    var _from = document.location.pathname.split('/'); // Permite obtener la ruta del archivo actual y convertirla en array separados por "/"
    _from = _from[_from.length - 1].replace('.html', '').replace('index_', ''); // filtramos el contenido del array y extraemos el nombre del archivo


     $.ajax({url: "http://digital12.xegmenta.com:3000/weather/api/"+_from,
    success: function(result){
      $("#content-text").html(result.name);
      $("#content-text2").html(result.main.temp);      
    }});
  </script>
  
  <h1 class="temperatura">ºC</h1>

  <img src="iconos/Nublado.png" class="img"/>
  <h1 class="dia"><script>
      var meses = new Array ("enero","febrero","marzo","abril","mayo","junio","julio","agosto","septiembre","octubre","noviembre","diciembre");
      var diasSemana = new Array("Domingo","Lunes","Martes","Miércoles","Jueves","Viernes","Sábado");
      var f=new Date();
      document.write(diasSemana[f.getDay()] + ", " + f.getDate() + " de " + meses[f.getMonth()]);
      </script></h1>

<h1 class="hora"><span id="liveclock" style="position:absolute;left:0;top:0;"></span><script language="JavaScript" type="text/javascript">
  function show5(){
 if (!document.layers&&!document.all&&!document.getElementById)
 return
  var Digital=new Date()
  var hours=Digital.getHours()
  var minutes=Digital.getMinutes()
  var seconds=Digital.getSeconds()
  var dn="PM"
 if (hours<12)
 dn="AM"
 if (hours>12)
 hours=hours-12
 if (hours==0)
 hours=12
 if (minutes<=9)
  minutes="0"+minutes
  if (seconds<=9)
  seconds="0"+seconds
 //change font size here to your desire
 myclock="<font size='10' face='Arial' ><b><font size='10'></font></br>"+hours+":"+minutes+":"
  +seconds+" "+dn+"</b></font>"
 if (document.layers){
 document.layers.liveclock.document.write(myclock)
 document.layers.liveclock.document.close()
 }
 else if (document.all)
 liveclock.innerHTML=myclock
 else if (document.getElementById)
 document.getElementById("liveclock").innerHTML=myclock
 setTimeout("show5()",1000)
  }
 window.onload=show5
  </script>
</h1>

<script>
  div = document.getElementById('contenido');
  div.setAttribute("class","ocultar");
//se ejecutara despues de 2 segundos
setTimeout(mostrarTexto, 2000);
//se ejecutara despues de 9 segundos
setTimeout(OcultarTexto, 9000);
function mostrarTexto(){
  div = document.getElementById('contenido');
  div.setAttribute("class","overlay");
}
function OcultarTexto(){
div = document.getElementById('contenido');
div.setAttribute("class","ocultar");
}//end function OcultarTexto
</script>
        
        
</body>

</html>

1 respuesta 1

1

Saludos podrías hacer algo así:

var ruta_diaSoleado = "https://previews.123rf.com/images/grkistock/grkistock1401/grkistock140100112/25272390-d%C3%ADa-soleado-en-la-pradera-ilustraci%C3%B3n-del-vector-.jpg";
var ruta_diaLluvia ="https://previews.123rf.com/images/mccjeff/mccjeff1711/mccjeff171100047/89866275-triste-d%C3%ADa-lluvioso.jpg";
var ruta_diaNublado = "http://www.clubcientificobezmiliana.org/blog/wp-content/uploads/2012/02/IMG_13400.jpg";
var temperatura = 10;
var temperatura2 = 20;
imagen = document.getElementById('imagen_temperatura');
if(temperatura == 10){
 imagen.setAttribute('src',ruta_diaSoleado);
}
var delayInMilliseconds = 2000; //retraso de 2 segundos
setTimeout(function() {
  if(temperatura2==20){
  imagen.setAttribute('src',ruta_diaLluvia);
  }
}, delayInMilliseconds);
<img src="" alt="TEMPERATURA" id="imagen_temperatura" width="100" heigth="100">

Si te fijas tengo declarado previamente las rutas de las imágenes a usar para los distintos climas o tiempos, mediante un if valido la temperatura en este caso es algo básico pero deberías validar si entre en cierto rango de temperatura muestras la ruta de una image u otra, para ello uso setAttribute que reemplaza o establece ese atributo a la imagen mediante JavaScript, espero te sirva.

También he usado un setTimeout que establece o define un retraso para que se pueda notar el cambio en las imágenes eso es opcional en tu lógica, suerte!

Documentacion setAttribute JavaScript

5
  • Todo va dentro del AJAX? como puedo cambiar el rango así? imagen = document.getElementById('imagen_temperatura'); if(temperatura == 10 ==20){ imagen.setAttribute('src',ruta_diaSoleado); es usando < o = ? Commented el 22 feb. 2019 a las 14:54
  • exacto dentro del evento success:{.....aqui..} Commented el 22 feb. 2019 a las 14:54
  • la condicion depende no estoy al tanto pero supongamos es soleado si esta entre 10 a 20 grados deberias hacer algo asi if(temperatura>9 && temperatura<21){.....loque sea..} Commented el 22 feb. 2019 a las 14:55
  • 1
    te sugiero revisar tambien lo operadores logicos por si los necesitaras: developer.mozilla.org/es/docs/Web/JavaScript/Referencia/…} Commented el 22 feb. 2019 a las 14:58
  • Perfecta esta respuesta. Commented el 22 feb. 2019 a las 14:59

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.