EnglishEnglish العربيةالعربية PortuguêsPortuguês Japanese日本語
404 Not Found

404 Not Found

nginx

Datas em JavaScript

O JavaScript usa o objeto Date para trabalhar com datas e horas. Pense nele como um relógio digital — mostra a hora atual, permite definir qualquer momento e pode calcular a diferença entre dois horários.

📖 Resumo

Criando Objetos Date

Quatro formas comuns de criar uma Date:

HTML 
<script>
console.log(new Date());                      // Data e hora atuais
console.log(new Date("2025-06-19"));          // String de data
console.log(new Date(2025, 5, 19, 10, 30, 0)); // Ano, mês, dia, horas, minutos, segundos
console.log(new Date(1718764800000));         // Timestamp (milissegundos)
</script>

Pegadinha importante: Meses começam do zero! 0 = janeiro, 11 = dezembro. Em new Date(2025, 5, 19), o 5 significa junho, não maio. Essa é provavelmente a decisão de design mais criticada do objeto Date — sem discussão.

Obtendo Data e Hora

Método Retorna Observação
getFullYear() Ano com 4 dígitos Não use getYear() — está obsoleto
getMonth() 0–11 Some 1 para o mês real
getDate() 1–31 Dia do mês
getDay() 0–6 0 = Domingo, não segunda!
getHours() 0–23 —
getMinutes() 0–59 —
getSeconds() 0–59 —

getDay() retorna o dia da semana, não o dia do mês — use getDate() para isso. Iniciantes frequentemente confundem.

Definindo Data e Hora

Existe um conjunto correspondente de métodos set: setFullYear(), setMonth(), setDate(), setHours(), setMinutes(), setSeconds(). Valores ultrapassam automaticamente:

HTML 
<script>
const d = new Date(2025, 5, 19);
d.setDate(32); // Vira automaticamente 2 de julho
console.log(d.toLocaleDateString());
</script>

Formatando Datas

Método Exemplo de Saída
toLocaleDateString() "19/06/2025"
toLocaleTimeString() "10:30:00"
toLocaleString() "19/06/2025 10:30:00"

Esses métodos formatam automaticamente com base na localidade do navegador.

Timestamps e Cálculo de Diferenças de Tempo

Um timestamp é a quantidade de milissegundos decorridos desde 1º de janeiro de 1970 00:00:00 UTC.

HTML 
<script>
console.log(Date.now());           // Obtém o timestamp atual
console.log(new Date().getTime()); // Igual ao acima
</script>

A abordagem principal para calcular diferenças de tempo: subtrair dois timestamps para obter a diferença em milissegundos, depois converter:

HTML 
<script>
const inicio = Date.now();
for (let i = 0; i < 1000000; i++) {} // Simula alguma operação
const fim = Date.now();
const diff = fim - inicio;           // Milissegundos
const diffSegundos = diff / 1000;    // Segundos
console.log("Tempo decorrido: " + diff + "ms (" + diffSegundos + " segundos)");
</script>

Exemplo: Exibindo Data e Hora Atual

HTML 
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <title>Data e Hora Atual</title>
  <style>
    body { font-family: sans-serif; padding: 20px; text-align: center; }
    .clock { display: inline-block; padding: 24px 40px; background: #1a1a2e; color: #e0e0e0; border-radius: 12px; }
    .time { font-size: 48px; font-weight: bold; color: #00d4ff; font-family: monospace; }
    .date { font-size: 20px; margin-top: 8px; color: #a0a0c0; }
  </style>
</head>
<body>
  <h2>Relógio ao Vivo</h2>
  <div class="clock">
    <div class="time" id="time">--:--:--</div>
    <div class="date" id="date">----/--/--</div>
  </div>
  <script>
    function atualizarRelogio() {
      const agora = new Date();
      const h = String(agora.getHours()).padStart(2, "0");
      const m = String(agora.getMinutes()).padStart(2, "0");
      const s = String(agora.getSeconds()).padStart(2, "0");
      document.getElementById("time").textContent = `${h}:${m}:${s}`;

      const ano = agora.getFullYear();
      const mes = String(agora.getMonth() + 1).padStart(2, "0");
      const dia = String(agora.getDate()).padStart(2, "0");
      const diasSemana = ["Dom", "Seg", "Ter", "Qua", "Qui", "Sex", "Sáb"];
      document.getElementById("date").textContent = `${ano}-${mes}-${dia} ${diasSemana[agora.getDay()]}`;
    }

    atualizarRelogio();
    setInterval(atualizarRelogio, 1000);
  </script>
</body>
</html>
▶ Experimente

Exemplo: Detalhes das Informações de Data

HTML 
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <title>Informações de Data</title>
  <style>
    body { font-family: sans-serif; padding: 20px; }
    table { border-collapse: collapse; margin: 16px 0; }
    td, th { border: 1px solid #ddd; padding: 10px 16px; text-align: left; }
    th { background: #4a90d9; color: #fff; }
    .note { background: #fff8e1; padding: 12px; border-radius: 6px; border-left: 4px solid #f0ad4e; margin: 16px 0; }
  </style>
</head>
<body>
  <h2>Valores Retornados pelos Métodos do Objeto Date</h2>
  <div id="output"></div>
  <script>
    const agora = new Date();
    const dados = [
      ["getFullYear()", agora.getFullYear(), "Ano com 4 dígitos"],
      ["getMonth()", agora.getMonth(), "0-11 (some 1 para o mês real)"],
      ["getDate()", agora.getDate(), "1-31 (dia do mês)"],
      ["getDay()", agora.getDay(), "0-6 (0 = Domingo)"],
      ["getHours()", agora.getHours(), "0-23"],
      ["getMinutes()", agora.getMinutes(), "0-59"],
      ["getSeconds()", agora.getSeconds(), "0-59"],
      ["getTime()", agora.getTime(), "Timestamp (milissegundos)"],
    ];

    document.getElementById("output").innerHTML = `
      <table>
        <tr><th>Método</th><th>Valor Retornado</th><th>Descrição</th></tr>
        ${dados.map(r => `<tr><td><code>${r[0]}</code></td><td>${r[1]}</td><td>${r[2]}</td></tr>`).join("")}
      </table>
      <div class="note">
        <strong>Meses começam do zero</strong>: getMonth() retorna ${agora.getMonth()}, mas o mês real é ${agora.getMonth()+1}.
        <strong>getDay() é o dia da semana</strong>: retorna ${agora.getDay()} (${["Dom","Seg","Ter","Qua","Qui","Sex","Sáb"][agora.getDay()]}), não a data!
      </div>
    `;
  </script>
</body>
</html>
▶ Experimente

Exemplo: Timer de Contagem Regressiva

HTML 
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <title>Contagem Regressiva</title>
  <style>
    body { font-family: sans-serif; padding: 20px; text-align: center; }
    .countdown { display: inline-block; padding: 24px; background: linear-gradient(135deg, #667eea, #764ba2); color: #fff; border-radius: 12px; margin: 16px 0; }
    .countdown h3 { margin: 0 0 12px; font-size: 18px; }
    .timer { display: flex; gap: 16px; justify-content: center; }
    .unit { text-align: center; }
    .number { font-size: 40px; font-weight: bold; font-family: monospace; }
    .label { font-size: 12px; opacity: 0.8; }
    .input-row { margin: 16px 0; }
    input { padding: 8px 12px; font-size: 16px; border: 2px solid #ccc; border-radius: 6px; }
    button { padding: 8px 20px; font-size: 16px; border: none; border-radius: 6px; cursor: pointer; background: #4a90d9; color: #fff; }
    button:hover { background: #357abd; }
  </style>
</head>
<body>
  <h2>Contagem Regressiva até a Data Alvo</h2>
  <div class="input-row">
    <input type="datetime-local" id="target" />
    <button id="startBtn">Iniciar Contagem</button>
  </div>
  <div class="countdown" id="countdown" style="display:none;">
    <h3 id="targetLabel">Tempo restante</h3>
    <div class="timer">
      <div class="unit"><div class="number" id="days">0</div><div class="label">Dias</div></div>
      <div class="unit"><div class="number" id="hours">0</div><div class="label">Horas</div></div>
      <div class="unit"><div class="number" id="minutes">0</div><div class="label">Min</div></div>
      <div class="unit"><div class="number" id="seconds">0</div><div class="label">Seg</div></div>
    </div>
  </div>
  <script>
    const alvoPadrao = new Date();
    alvoPadrao.setDate(alvoPadrao.getDate() + 7);
    const dataStr = alvoPadrao.toISOString().slice(0, 16);
    document.getElementById("target").value = dataStr;

    let timer = null;

    document.getElementById("startBtn").addEventListener("click", function() {
      const alvo = new Date(document.getElementById("target").value);
      if (isNaN(alvo.getTime())) {
        alert("Selecione uma data e hora válidas");
        return;
      }
      document.getElementById("countdown").style.display = "inline-block";
      document.getElementById("targetLabel").textContent =
        `Tempo até ${alvo.toLocaleString()}`;

      if (timer) clearInterval(timer);

      function atualizar() {
        const agora = Date.now();
        const diff = alvo.getTime() - agora;
        if (diff <= 0) {
          document.getElementById("days").textContent = "0";
          document.getElementById("hours").textContent = "0";
          document.getElementById("minutes").textContent = "0";
          document.getElementById("seconds").textContent = "0";
          document.getElementById("targetLabel").textContent = "Tempo esgotado!";
          clearInterval(timer);
          return;
        }
        const dias = Math.floor(diff / (1000 * 60 * 60 * 24));
        const horas = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        const minutos = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
        const segundos = Math.floor((diff % (1000 * 60)) / 1000);
        document.getElementById("days").textContent = dias;
        document.getElementById("hours").textContent = String(horas).padStart(2, "0");
        document.getElementById("minutes").textContent = String(minutos).padStart(2, "0");
        document.getElementById("seconds").textContent = String(segundos).padStart(2, "0");
      }

      atualizar();
      timer = setInterval(atualizar, 1000);
    });
  </script>
</body>
</html>
▶ Experimente

Exemplo: Calculadora de Diferença de Datas

HTML 
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <title>Diferença de Datas</title>
  <style>
    body { font-family: sans-serif; padding: 20px; }
    .calc { max-width: 500px; margin: 16px auto; }
    .row { margin: 12px 0; }
    label { display: inline-block; width: 100px; font-weight: bold; }
    input { padding: 8px 12px; font-size: 16px; border: 2px solid #ccc; border-radius: 6px; }
    button { padding: 8px 20px; font-size: 16px; border: none; border-radius: 6px; cursor: pointer; background: #5cb85c; color: #fff; margin-top: 8px; }
    button:hover { background: #449d44; }
    .result { margin-top: 16px; padding: 16px; background: #f0f7ff; border-radius: 8px; border: 2px solid #4a90d9; }
    .result div { margin: 4px 0; }
  </style>
</head>
<body>
  <h2 style="text-align:center;">Calculadora de Diferença de Datas</h2>
  <div class="calc">
    <div class="row">
      <label>Data Início:</label>
      <input type="date" id="start" />
    </div>
    <div class="row">
      <label>Data Fim:</label>
      <input type="date" id="end" />
    </div>
    <div style="text-align:center;">
      <button id="calcBtn">Calcular</button>
    </div>
    <div class="result" id="result" style="display:none;"></div>
  </div>
  <script>
    const hoje = new Date();
    const mesPassado = new Date();
    mesPassado.setMonth(mesPassado.getMonth() - 1);
    document.getElementById("start").value = mesPassado.toISOString().slice(0, 10);
    document.getElementById("end").value = hoje.toISOString().slice(0, 10);

    document.getElementById("calcBtn").addEventListener("click", function() {
      const inicio = new Date(document.getElementById("start").value);
      const fim = new Date(document.getElementById("end").value);

      if (isNaN(inicio.getTime()) || isNaN(fim.getTime())) {
        alert("Selecione datas válidas");
        return;
      }

      const diffMs = Math.abs(fim - inicio);
      const diffDias = Math.floor(diffMs / (1000 * 60 * 60 * 24));
      const diffHoras = Math.floor(diffMs / (1000 * 60 * 60));
      const diffMinutos = Math.floor(diffMs / (1000 * 60));
      const diffSemanas = Math.floor(diffDias / 7);

      document.getElementById("result").style.display = "block";
      document.getElementById("result").innerHTML = `
        <div><strong>Dias:</strong> ${diffDias}</div>
        <div><strong>Horas:</strong> ${diffHoras}</div>
        <div><strong>Minutos:</strong> ${diffMinutos}</div>
        <div><strong>Aproximadamente:</strong> ${diffSemanas} semanas e ${diffDias % 7} dias</div>
      `;
    });
  </script>
</body>
</html>
▶ Experimente

❓ Perguntas Frequentes

P: Por que getMonth() precisa somar 1? R: Porque a classe Date do Java foi projetada assim, e o JavaScript herdou essa "tradição." Todo mundo concorda que é um design bobo, mas não pode ser alterado — código demais depende desse comportamento. É só memorizar.

P: Existe diferença entre new Date("2025-06-19") e new Date(2025, 5, 19)? R: Sim. Datas em string são interpretadas como UTC à meia-noite, enquanto a forma com parâmetros usa horário local. A hora exibida pode diferir em 3 horas (para UTC-3). Se você só se importa com a data e não com a hora, a forma com parâmetros é mais segura.

P: Como calcular a idade de alguém? R: Subtraia o ano de nascimento do ano atual, depois verifique se o aniversário já passou este ano: se o mês atual for menor que o mês de nascimento, ou se os meses forem iguais mas o dia atual for menor que o dia de nascimento, subtraia 1 da idade.

📝 Atividades

  1. Escreva uma função formatarData(data) que retorne uma string no formato "AAAA-MM-DD (DiaDaSemana)". Certifique-se de que meses e dias tenham zero à esquerda.
  2. Escreva uma função obterIdade(aniversario) que receba uma string de data (ex: "2000-03-15") e retorne a idade atual em anos completos.
  3. Construa um recurso de "tempo atrás": dada uma data passada, exiba "X anos, X meses, X dias atrás" ou "X dias atrás" ou "X horas atrás" — escolhendo automaticamente o formato apropriado com base na diferença de tempo.
100%