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>