1

Estou fazendo um relógio que também mostra os dias da semana, porém gostaria de conseguir mostrar o valor com o nome por extenso. Eu até consegui fazer isso fazendo um monte de if, mas eu queria fazer uma função em vez disso, como faço? Uso o for?

function carregar(){
    setInterval(() => {
        let data = new Date()
        let diasemana = data.getDay()
        let dia = data.getDate()
        let mes = data.getMonth() + 1 //Coloquei +1 porque o resultado estava sendo o mês anterior
        let ano = data.getFullYear()
        let hora = data.getHours()
        let min = data.getMinutes()
        let seg = data.getSeconds()
        let hou = data.getHours()
        let pe = "AM"
        let dw = ["Domingo", "Segunda-Feira", "Terça-Feira", "Quarta-Feira", "Quinta-Feira", "Sexta-Feira", "Sábado",]
        let mo = Array["Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro"]
        let dias = window.document.getElementById('dias')
        let relogio = window.document.getElementById('relogio')

        dias.innerHTML = `${diasemana} ${dia} / ${mes} / ${ano} `
        relogio.innerHTML = `${hora} : ${min} : ${seg} oi`
        
        if(diasemana == 0) {
            diasemana = dw[0]
        } else if(diasemana == 1) {
            diasema = dw[1]
        } else if(diasemana == 2) { 
            diasemana = dw[2]
        } else if(diasemana == 3) {
            diasemana = dw[3]
        } else if(diasemana == 4) {
            diasemana = dw[4]
        } else if(diasemana == 5) {
            diasemana = dw[5]
        } else {
            diasemana = dw[6] }
        
        //AM e PM
        if(hou >= 12){
             pe = "PM";
        } if(hou == 0){
            hou = 12;
        } if(hou > 12){
             hou = hou - 12;
        }
        //Mudando para String os dias da semana

        dias.innerHTML = `${diasemana} ${dia} / ${mes} / ${ano} `
        relogio.innerHTML = `${hora} : ${min} : ${seg} ${pe}`
    }, 1);
}
1
  • Você quer que os ifs virem uma função ou posso substituilos por um for? 8/10/2020 às 10:36

1 Resposta 1

6

Basicamente, nesse if:

if(diasemana == 0) {
    diasemana = dw[0]
} else if(diasemana == 1) {
    diasemana = dw[1]
    etc...

Você está fazendo "se o dia é zero, pegue o índice zero, se for 1, pegue o índice 1, etc...". Se é assim, então use diretamente o valor como índice:

diasemana = dw[diasemana]

Ou ainda:

diasemana = dw[data.getDay()]

E só. A outra resposta (que foi apagada) disse para usar for, mas não precisa, pois ele percorre o array desnecessariamente até encontrar o índice, mas se você já sabe qual é o índice, para que o for? Não precisa usar for, não force o uso de algo que não é necessário. Se o valor que você já tem é o mesmo do índice, pegue ele direto e pronto.


Dito isso, dá para simplificar o código, pois existem formatos prontos que você pode usar com toLocaleDateString e toLocaleTimeString:

function carregar(){
    let data = new Date();
    let dw = ["Domingo", "Segunda-Feira", "Terça-Feira", "Quarta-Feira", "Quinta-Feira", "Sexta-Feira", "Sábado"];
    document.getElementById('dias').innerHTML = `${dw[data.getDay()]} ${data.toLocaleDateString("pt-BR")}`;
    document.getElementById('relogio').innerHTML = `${data.toLocaleTimeString("en-US")}`;
}

document.addEventListener('DOMContentLoaded', function() { setInterval(carregar, 1000) });
<p id="dias"></p>
<p id="relogio"></p>

Os locales "pt-BR" e "en-US" referem-se respectivamente ao português do Brasil e ao inglês americano, e eles já ajustam os formatos de data e hora de acordo com o que eu entendi que você precisa ("pt-BR" usa o formato de data "dd/mm/aaaa", e "en-US" usa o formato de hora "h:m:s am/pm").

E o segundo parâmetro de setInterval é o valor em milissegundos (milésimos de segundo), então coloquei 1000 para atualizar a cada 1 segundo (pois a cada 1 milissegundo, como você fez, me parece "exagero", já que o relógio não vai mostrar as frações de segundo).

Também coloquei ponto-e-vírgula no final das linhas. Pode parecer "frescura", e sei que o JavaScript "aceita" o código sem ponto e vírgula e "funciona", mas isso evita algumas situações bizarras que podem ocorrer se você não usá-los, como essa e essa (veja mais sobre isso aqui).

Nem sei se precisava mesmo de uma função só pra isso, mas se quiser muito fazer isso:

function getDiaDaSemana(data) {
    let dw = ["Domingo", "Segunda-Feira", "Terça-Feira", "Quarta-Feira", "Quinta-Feira", "Sexta-Feira", "Sábado"];
    return dw[data.getDay()];
}

function carregar(){
    let data = new Date();
    document.getElementById('dias').innerHTML = `${getDiaDaSemana(data)} ${data.toLocaleDateString("pt-BR")}`;
    document.getElementById('relogio').innerHTML = `${data.toLocaleTimeString("en-US")}`;
}

document.addEventListener('DOMContentLoaded', function() { setInterval(carregar, 1000) });
<p id="dias"></p>
<p id="relogio"></p>


Lib externa

Se quiser/puder usar uma lib externa, uma alternativa é o Moment.js. Para ter o nome do dia da semana em português, você vai precisar da versão com locales:

moment.locale('pt-BR'); // mudar idioma para português

function carregar(){
    let data = moment();
    document.getElementById('dias').innerHTML = data.format('dddd DD/MM/YYYY');
    document.getElementById('relogio').innerHTML = data.format('h:mm:ss A');
}

document.addEventListener('DOMContentLoaded', function() { setInterval(carregar, 1000) });
<script src="https://momentjs.com/downloads/moment-with-locales.min.js"></script>

<p id="dias"></p>
<p id="relogio"></p>

Outra alternativa é o Luxon:

function carregar(){
    let data = luxon.DateTime.local();
    document.getElementById('dias').innerHTML = data.setLocale('pt-BR').toFormat('EEEE dd/MM/yyyy');
    document.getElementById('relogio').innerHTML = data.toFormat('h:mm:ss a');
}

document.addEventListener('DOMContentLoaded', function() { setInterval(carregar, 1000) });
<script src="https://moment.github.io/luxon/global/luxon.min.js"></script>

<p id="dias"></p>
<p id="relogio"></p>

2
  • Não tinha pensado nesta opção:let dw = ["Domingo", "Segunda-Feira", "Terça-Feira", "Quarta-Feira", "Quinta-Feira", "Sexta-Feira", "Sábado"]; return dw[data.getDay()]; gostei :) 8/10/2020 às 18:38
  • return ["Domingo", "Segunda-Feira", "Terça-Feira", "Quarta-Feira", "Quinta-Feira", "Sexta-Feira", "Sábado"][data.getDay()]; 8/10/2020 às 19:20

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .