Construindo Aplicações Interativas

Apr 08 2023

Conteúdo Data básica Métodos de objeto de data Projete um cronômetro de contagem regressiva Data básica ⏳ Introdução Date() é usado para processar datas e horas. Date() é uma função construtora, portanto deve ser instanciada antes de ser usada.

Contente

Data Básica

Métodos de objeto de data

Crie um cronômetro de contagem regressiva

Data Básica

⏳ Introdução

Date() é usado para processar datas e horas.

Date() é uma função construtora, portanto deve ser instanciada antes de ser usada. Ou seja, um objeto de data deve ser criado usando new . A saída está no formato “Fri Apr 07 2023 20:18:50 GMT-0400 (Eastern Daylight Time)”

const date = new Date()

Retorna a hora atual — sem argumentos

Para obter a hora atual, não há necessidade de passar nenhum argumento para a função. Basta chamar a função diretamente.

const nowDate = new Date(); 
console.log(nowDate)
// output: Fri Apr 07 2023 20:18:50 GMT-0400 (Eastern Daylight Time)

Para obter um determinado tempo, devemos fornecer parâmetros para a função. Duas maneiras de escrever parâmetros incluem:

String (comumente usado): por exemplo. '2023–01–01 12:00:00'

const oneDate = new Date('2023-01-01 12:00:00');
console.log(oneDate) 
// OUTPUT: Sun Jan 01 2023 12:00:00 GMT-0500 (Eastern Standard Time)

const oneDate = new Date(2023, 1, 1);
console.log(oneDate) 
// OUTPUT: Wed Feb 01 2023 00:00:00 GMT-0500 (Eastern Standard Time)

Você pode prever a saída do seguinte código?

const oneDate = new Date(2023, 10, 31);
console.log(oneDate)

B. Terça-feira , 31 de outubro de 2023 00:00:00 GMT-0400 (horário de verão do leste)

C. Qua, 01 de novembro de 2023 00:00:00 GMT-0400 (horário de verão do leste)

D. Sex , 31 de novembro de 2023 00:00:00 GMT-0400 (horário de verão do leste)

❗ A resposta é A !

Por que?

new Date(2023, 10, 31) cria um novo objeto Date com o ano 2023, o mês 10 (que representa novembro) e o dia 31. No entanto, como novembro tem apenas 30 dias, o objeto Date irá “rolar” em 1º de dezembro, e é por isso que obtemos Sex 01 de dezembro de 2023 00:00:00 GMT-0500 (horário padrão do leste) como saída.

Para criar um objeto Date para 31 de outubro de 2023, precisaríamos usar new Date(2023, 9, 31) :

const oneDate = new Date(2023, 9, 31);
console.log(oneDate)
// OUTPUT: Tue Oct 31 2023 00:00:00 GMT-0400 (Eastern Daylight Time)

⏳ grupo 'obter '

O grupo 'get' pode ser usado para recuperar partes específicas de um objeto de data.

⭐ obter o ano, mês, data, dia, hora, minuto e segundo

const date = new Date('2023/01/01 12:00:00'); 
console.log(date) // Sun Jan 01 2023 12:00:00 GMT-0500 (Eastern Standard Time)
console.log(`Year: `, date.getFullYear()) // Year:  2023
console.log(`Month (error): `, date.getMonth()) // Month (error):  0
console.log(`Month: `, date.getMonth()+1) // Month:  1
console.log(`Date: `, date.getDate()) // Date:  1
console.log(`Day: `, date.getDay()) // Day:  0 
console.log(`Hour: `, date.getHours()) // Hour:  12
console.log(`Minutes: `, date.getMinutes()) // Minutes:  0
console.log(`Seconds: `, date.getSeconds()) // Seconds:  0

Existem quatro maneiras de obter carimbos de data/hora:

O objeto Date calcula o tempo em milissegundos desde 1º de janeiro de 1970 (Tempo Universal Coordenado ou UTC) .
Como os milissegundos fornecem maior precisão e são exclusivos, eles podem ser usados para criptografia.

console.log(`getTime(): `,date.getTime('2023/01/01 12:00:00')) // getTime():  1672592400000
console.log(`valueOf(): `,date.valueOf('2023/01/01 12:00:00')) // valueOf():  1672592400000
console.log(`+new Date: `,+new Date('2023/01/01 12:00:00')) // +new Date:  1672592400000
console.log(`Date.now(): `,Date.now()) // Date.now():  1680914979729

⭐ definir o ano, mês, data, hora, minuto e segundo

Nota: não precisamos definir um dia!

date.setFullYear(2023);
date.setMonth(0);
date.setDate(1);
date.setHours(12);
date.setMinutes(0);
date.setSeconds(0);
console.log(date) // Sun Jan 01 2023 12:00:00 GMT-0500 (Eastern Standard Time)

date.setTime(1672592400000);
console.log(date) //Sun Jan 01 2023 12:00:00 GMT-0500 (Eastern Standard Time)

Muitas vezes vemos páginas da web com cronômetros de contagem regressiva em aplicativos de compras, então como podemos projetar uma função de contagem regressiva?

⌛ Fórmulas básicas

Aqui estão algumas fórmulas básicas para converter milissegundos em dias, horas, minutos e segundos:

const day = milliseconds / 1000 / 60 / 60 / 24;
const hour = milliseconds / 1000 / 60 / 60 % 24;
const minute = milliseconds / 1000 / 60 % 60;
const second = milliseconds / 1000 % 60;

Aqui está a função de contagem regressiva:

const countDown = (time) => {
  const nowTime = +new Date(); // Returns the number of milliseconds for the current time
  const dueTime = +new Date(time); // Returns the number of milliseconds for the user-set due time
  const timeDiff = dueTime - nowTime; // Returns the difference in milliseconds between the two times
  let day = Math.floor(timeDiff / 1000 / 60 / 60 / 24);
  let hour = Math.floor(timeDiff / 1000 / 60 / 60 % 24);
  let minute = Math.floor(timeDiff / 1000 / 60 % 60);
  let second = Math.floor(timeDiff / 1000 % 60);

  // Add a leading 0 if a number is less than 10
  day = day < 10 ? '0' + day : day;
  hour = hour < 10 ? '0' + hour : hour;
  minute = minute < 10 ? '0' + minute : minute;
  second = second < 10 ? '0' + second : second;

  return `${day}:${hour}:${minute}:${second}`;
}

console.log(countDown('2023-03-21 12:00:00'))

[1] Crie um cronômetro de contagem regressiva em apenas 18 linhas de javascript — Sitepoint . (2020, 1º de junho).https://www.sitepoint.com/build-javascript-countdown-timer-no-dependencies/