Como alterar um texto conforme o horário?

[Alessandro Bodão 0]

Fala rapaziada! Tudo legal?

 

Estou desenvolvendo um site onde coloquei uma espécie de 'relógio' nele, onde as pessoas veem que horas são, os minutos e segundos vão atualizando automático. Até aí tudo certo...

 

No header do site tem um título principal (h1) que começa dando bom dia. Como as pessoas vão acessar o site em horários diferentes, tive a ideia do texto atualizar automaticamente pra boa tarde ou boa noite, relativo ao intervalo de tempo do relógio, mas não sou tão bom ainda com javascript. 

[Omar~ 87]

É algo até bobo de lhe responder, pois se um horário vai de A a B é uma coisa e X a Y etc...

Portanto é só comparar o valor do seu relógio aí se for algo entre uma hora e outra é só alterar o texto da suposta tag h1 que a propósito essa tag só deve ser usada como título de um contexto e não levianamente...

[Electronic 124]

Você pega a hora atual

hora = new Date().getHours() // vai retorna a hora de 0 ~ 23

Com o valor da variável hora você define se a mensagem será bom dia, tarde ou noite e salve a saudação numa variável, msg

Depois selecione a tag que deseja alterar com 

document.getElementById('seu id').textContent = msg

 

 

 

[Alessandro Bodão 0]

15 horas atrás, Electronic disse:

Você pega a hora atual

hora = new Date().getHours() // vai retorna a hora de 0 ~ 23

Com o valor da variável hora você define se a mensagem será bom dia, tarde ou noite e salve a saudação numa variável, msg

Depois selecione a tag que deseja alterar com 

document.getElementById('seu id').textContent = msg

 

 

 

Nossa tô apanhando aqui pra acertar nisso (to aprendendo javascript agora).

O código do relógio é:

const zeroFill = n => {
				return ('0' + n).slice(-2);
			}

			const interval = setInterval(() => {
				const now = new Date();

				const dataHora = zeroFill(now.getHours()) + ':' + zeroFill(now.getMinutes()) + ':' + zeroFill(now.getSeconds());

				document.getElementById('hora').innerHTML = dataHora;
			}, 1000);

Estou tentando fazer usando if, já tentei usando switch... e nada dá certo =( 

hora = new Date().getHours()
        
            var msg = 'BOA TARDE!';

            if (dataHora >= '12:00:00') {
                document.getElementById('texto').textContent = msg;
            }

 

[Electronic 124]

Dentro e no final da sua função de intervalo você faz a logica pra decidir qual mensagem.

 

if (now.getHours() >= 12 &&
    now.getHours() < 18) {
  document.getElementById('msg').innerHTML = "boa tarde";
}

[Alessandro Bodão 0]

2 horas atrás, Electronic disse:

Dentro e no final da sua função de intervalo você faz a logica pra decidir qual mensagem.

 

if (now.getHours() >= 12 &&
    now.getHours() < 18) {
  document.getElementById('msg').innerHTML = "boa tarde";
}

Salvou minha vida aqui cara. Muito obrigado pela atenção!