Javascript: Agrupando horários por período do dia

Me deparei com a necessidade de agrupar diversos horários por período do dia. Neste post você aprenderá como fazer isso de forma simples e rápida.

O primeiro ponto é saber em quantos períodos o dia é separado. Veja como é feito esta divisão.

– Madrugada: Entre 00:00 e 05:59
– Manhã: Entre às 06:00 e 11:59
– Tarde: Entre o 12:00 e 17:59
– Noite: Entre às 18:00 e 23:59

Diante dessas informações foi desenvolvido o script abaixo:

<html>
<head>
    <style>
        body{font-family: Arial, sans-serif}
    </style>
    <script type="text/javascript">
        var horas = ['00:00', '01:40', '05:59', '06:00', '07:00', '08:15', '09:30', '11:59', '12:00', '17:30', '17:59', '18:00', '19:30', '22:00', '23:59'];
 
        var html = '';
        var bloco_manha, bloco_tarde, bloco_noite, bloco_madrugada = false;
        for (var h = 0; h < horas.length; h++) {
 
            if ( (horas[h] >= '00:00') && (horas[h] < '06:00') && (!bloco_madrugada)) {//00:00~05:59
                html += '<div style="background-color:#adb0b3;color:white;padding:6px">Período da Madrugada</div>';
                bloco_madrugada = true;
            }
 
            if ( (horas[h] >= '06:00') && (horas[h] < '12:00') && (!bloco_manha)) {//06:00~11:59
                html += '<div style="background-color:#0a4b81;color:white;padding:6px">Período da Manhã</div>';
                bloco_manha = true;
            }
 
            if ( (horas[h] >= '12:00') && (horas[h] < '18:00') && (!bloco_tarde)) {//12:00~17:59
                html += '<div style="background-color:#996c00;color:white;padding:6px">Período da Tarde</div>';
                bloco_tarde = true;
            }
 
            if ( (horas[h] >= '18:00') && (horas[h] < '24:00') && (!bloco_noite)) {//18:00~23:59
                html += '<div style="background-color:#250a07;color:white;padding:6px">Período da Noite</div>';
                bloco_noite = true;
            }
 
            html += '<p>' + horas[h] + '</p>';
        }
 
        document.write(html);
    </script>
</head>
</html>

Resultado:

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *