Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- ESTILO // troca as informações das imagens q deve dar certo :)
- body {
- background: rgb(70, 142, 236);
- font: normal 15pt Arial;
- }
- header {
- color: white;
- text-align: center;
- }
- section {
- background: white;
- border-radius: 10px;
- padding: 15px;
- width: 500px;
- margin: auto;
- box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.700);
- }
- div {
- text-align: center;
- padding: 8px;
- }
- footer {
- color: white;
- text-align: center;
- font-style: italic;
- }
- MODELO
- <!DOCTYPE html>
- <html lang="pt-BR">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <title>Hora do Dia</title>
- <link rel="stylesheet" href="estilo.css">
- </head>
- <body onload="carregar()">
- <header>
- <h2>Hora do Dia</h2>
- </header>
- <section>
- <div id="msg">
- Aqui vai aparecer a mensagem...
- </div>
- <div div='foto'>
- <img id='imagem' src='' alt=''>
- </div>
- </section>
- <footer>
- <p>© CursoemVideo</p>
- </footer>
- <script src="script.js"></script>
- </body>
- </html>
- SCRIPT
- function carregar() {
- var msg = window.document.getElementById('msg')
- var img = window.document.getElementById('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.png'
- document.body.style.background = '#edc66e'
- } else if (hora >= 12 && hora < 18) {
- // BOA TARDE!
- img.src = 'fototarde.png'
- document.body.style.background = '#b9591e'
- } else {
- // BOA NOITE!
- img.src = 'fotonoite.png'
- document.body.style.background = '#494d4b'
- }
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement