Por vezes nos nossos projetos de desenvolvimento Web queremos exibir a data por extenso, como também a exibição da hora, dos minutos, e dos segundos, mas de forma a esta ser atualizada em tempo real sem utilizarmos uma framework.
Deixo aqui o código da solução que eu encontrei.
(function(){ // Função que permite selecionar os elementos do documento function $(seletor){ return document.querySelector(seletor); } function mostraCalendario(){ var dHoje = new Date(); var diasDaSemana = ["domingo", "segunda", "terça", "quarta", "quinta", "sexta", "sábado"]; var diaSemana = dHoje.getDay(); // Operador ternário para colocação da palavra feira var nomeDiaDaSemana = diaSemana > 0 & diaSemana < 6 ? diasDaSemana[diaSemana] + "-feira" : diasDaSemana[diaSemana]; var dia = dHoje.getDate() var mesesDoAno = ["Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro"]; var mes = dHoje.getMonth(); var mesDoAno = mesesDoAno[mes]; var ano = dHoje.getFullYear(); // Utilização de operador ternário para adiionar o prefixo zero quando o digito for inferior a dez var hora = dHoje.getHours() < 10 ? "0" + dHoje.getHours() : dHoje.getHours(); var min = dHoje.getMinutes() < 10 ? "0" + dHoje.getMinutes() : dHoje.getMinutes(); var sec = dHoje.getSeconds() < 10 ? "0" + dHoje.getSeconds() : dHoje.getSeconds(); // Formatação da saída var dataPorExtenso = "<span id='data'>" + nomeDiaDaSemana + ", " + dia + " de " + mesDoAno + " de " + ano + "</span>"; var horas = "<span id='horas'>" + hora + ":" + min + ":" + sec + "</span>"; // Coloca data na div com o ID = calendario $('#calendario').innerHTML = dataPorExtenso + " - " + horas; } // Executa a função mostrarCalendario a cada segundo setInterval(function(){ mostraCalendario(); }, 1000); })();