stefanyprs
-
Total de itens
1 -
Registro em
-
Última visita
Sobre stefanyprs
-
Não estou conseguindo mudar a imagem de acordo com a hora apresentada no if/else.
stefanyprs postou um tópico no fórum Javascript
//modelo.html <!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Hora do dia</title> <link rel="stylesheet" href="estilo.css"> </head> <body onload="carregar()"> <header> <h1> Hora do dia </h1> </h1> </header> <section> <div id="msg"> msg </div> <div id="foto"> <img class="imagem" src="fotomanha.jpg" alt="foto do dia"> </div> </section> <footer> <p>© Rodapé </p> </footer> <script src="script.js"></script> </body> </html> //script.js function carregar () { var msg = window.document.getElementById('msg') var img = window.document.getElementsByClassName('imagem') var data = new Date() var hora = data.getHours() msg.innerHTML = 'Agora são ' + hora + ' horas' if (hora >= 0 && hora < 12){ //Bom dia img.src = 'fotomanha.jpg' } else if (hora >= 12 && hora < 18){ //Boa tarde img.src = 'fototarde.jpg' } else { //Boa noite img.src = 'fotonoite.jpg' } } //estilo.css body{ background-color: aqua; font: normal 15pt Arial; } header{ color:rgb(255, 255, 255); text-align: center; } section{ background: white; border-radius: 10px; padding: 15px; width: 500px; margin:auto; box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.329); } footer{ color:white; text-align: center; font-style: italic; } div{ text-align: center; } .imagem{ width: 500px; /* largura da imagem */ height: 350px; /* altura da imagem */ margin-top: 10px; /* margem do topo */ }