Création d'applications interactives

Apr 08 2023

Contenu Date de base Méthodes d'objet Date Concevoir un compte à rebours Date de base ⏳ Introduction Date() est utilisé pour traiter les dates et les heures. Date() est une fonction constructeur, elle doit donc être instanciée avant utilisation.

Contenu

Date de base

Méthodes d'objet de date

Concevoir un compte à rebours

Date de base

⏳ Présentation

Date() est utilisé pour traiter les dates et les heures.

Date() est une fonction constructeur, elle doit donc être instanciée avant utilisation. Autrement dit, un objet date doit être créé à l'aide de new . La sortie est au format "Fri Apr 07 2023 20:18:50 GMT-0400 (Eastern Daylight Time)"

const date = new Date()

Renvoie l'heure actuelle — sans arguments

Pour obtenir l'heure actuelle, il n'est pas nécessaire de passer des arguments à la fonction. Appelez simplement la fonction directement.

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

Pour obtenir un temps particulier, nous devons fournir des paramètres à la fonction. Deux façons d'écrire les paramètres incluent :

Chaîne (couramment utilisée) : par ex. '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)

Pouvez-vous prédire la sortie du code suivant ?

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

B. mar. 31 octobre 2023 00:00:00 GMT-0400 (heure avancée de l'Est)

C. Mer 01 novembre 2023 00:00:00 GMT-0400 (Heure avancée de l'Est)

D. Ven 31 novembre 2023 00:00:00 GMT-0400 (Heure avancée de l'Est)

❗ La réponse est A !

Pourquoi?

new Date(2023, 10, 31) crée un nouvel objet Date avec l'année 2023, le mois 10 (qui représente novembre) et le jour 31. Cependant, étant donné que novembre n'a que 30 jours, l'objet Date va "se retourner" au 1er décembre, c'est pourquoi nous obtenons le 1er décembre 2023 00:00:00 GMT-0500 (heure normale de l'Est) comme sortie.

Pour créer un objet Date pour le 31 octobre 2023, nous aurions besoin d'utiliser 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)

⏳ groupe "obtenir "

Le groupe 'get' peut être utilisé pour récupérer des parties spécifiques d'un objet date.

⭐ obtenez l'année, le mois, la date, le jour, l'heure, la minute et la seconde

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

Il existe quatre façons d'obtenir des horodatages :

L'objet Date calcule le temps en millisecondes depuis le 1er janvier 1970 (Coordinated Universal Time ou UTC) .
Étant donné que les millisecondes offrent une plus grande précision et sont uniques, elles peuvent être utilisées pour le chiffrement.

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

⭐ réglez l'année, le mois, la date, l'heure, la minute et la seconde

Remarque : nous n'avons pas besoin de définir un jour !

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)

Nous voyons souvent des pages Web avec des comptes à rebours sur les applications d'achat, alors comment pouvons-nous concevoir une fonction de compte à rebours ?

⌛ Formules de base

Voici quelques formules de base pour convertir des millisecondes en jours, heures, minutes et secondes :

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;

Voici la fonction de compte à rebours :

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] Créez un compte à rebours en seulement 18 lignes de javascript — Sitepoint . (2020, 1er juin).https://www.sitepoint.com/build-javascript-countdown-timer-no-dependencies/