Respostas no Fórum
-
Posts
-
Na verdade consegui agora, vi que na parte 3 do exercício o Guanabara usa uma propriedade do CSS (text-align) no JS da seguinte forma: textAlign.
Tentei ver se seria essa a forma de escrever no JavaScript e funcionou, no caso, a linha fica assim:
document.body.style.backgroundImage = ‘linear-gradient(to right, #191970, #4f4fc7, #7373ec)’
HTML:
<body onload=”carregar()”>
<header>
<h1>Hora do dia</h1>
</header><section>
<div id=”msg”>
Aqui vai aparecer a mensagem
</div>
<div id=”foto”>
</div>
</section><footer>
<p>© Yuander</p>
</footer><script src=”script.js”></script>
</body>
SCRIPT:
//Funções
//Carregar data e hora
const carregar = () => {
var msg = document.querySelector(‘#msg’)
var img = document.querySelector(‘#img1’)
var data = new Date()
var hora = data.getHours()//var hora = 19
msg.innerHTML =
Agora são ${hora} horas.//Definir manhã, tarde e noite
if (hora >= 4 && hora< 12) {
//Bom dia!
img.src = ‘midia/morning2.png’
document.body.style.backgroundImage = ‘linear-gradient(to right, #fc9c0e, #ffb84d, #ffcc27)’
} else if (hora >= 12 && hora < 18) {
//Boa tarde
img.src = ‘midia/afternoom2.png’
document.body.style.backgroundImage = ‘linear-gradient(to right, #ffb412, #5197ff, #7aafff)’
} else {
//Boa noite
img.src = ‘midia/night2.png’
document.body.style.backgroundImage = ‘linear-gradient(to right, #191970, #4f4fc7, #7373ec)’
}
}Escrevendo dessa forma funcionou.
😀
Obrigado.
Não consegui resolver, a página carrega apenas o background = ‘cor’, se eu uso o background-image é carregado apenas o que foi definido no CSS.
Só corrigindo, eu disse background-color em alguns momentos, mas para o efeito degradê precisa ser escrito background-image, como está no código.
Bom dia, estou tentando estilizar o background a depender da hora, e tentei usar o background-color, mas ele não funciona, o VS Code mostra que tem algo errado no sinal de “=”, usei da seguinte forma:
const carregar = () => {
var msg = document.querySelector(‘#msg’)
var img = document.querySelector(‘#img1’)
var data = new Date()
var hora = data.getHours()//var hora = 13
msg.innerHTML =
Agora são ${hora} horas.//Definir manhã, tarde e noite
if (hora >= 4 && hora< 12) {
//Bom dia!
img.src = ‘../morning2.png’
//document.body.style.background-image = ‘linear-gradient(to right, #fc9c0e, #ffb84d, #ffcc27)’ //Não funciona
document.body.style.background = ‘#ffcc27’ // Funciona
} else if (hora >= 12 && hora < 18) {
//Boa tarde
img.src = ‘../afternoom2.png’
document.body.style.background = ‘#5197ff’ //Funciona
} else {
//Boa noite
img.src = ‘../night2.png’
//document.body.style.background-image = ‘linear-gradient(to right, #191970, #4f4fc7, #7373ec)’ //Não funciona
document.body.style.background = ‘#4f4fc7’ //Funciona
}
}Como preciso escrever para que o background-color funcione?
Obrigado
