Inhalt

Basisdatum

Datumsobjektmethoden

Gestalte einen Countdown-Timer

Basisdatum

⏳ Einführung

Date() wird verwendet, um Datums- und Zeitangaben zu verarbeiten.

Date() ist eine Konstruktorfunktion, daher muss sie vor der Verwendung instanziiert werden. Das heißt, ein Datumsobjekt muss mit new erstellt werden . Die Ausgabe erfolgt im Format „Fr 07 Apr 2023 20:18:50 GMT-0400 (Eastern Daylight Time)“

const date = new Date()

Gibt die aktuelle Uhrzeit zurück — ohne Argumente

Um die aktuelle Uhrzeit zu erhalten, müssen der Funktion keine Argumente übergeben werden. Rufen Sie die Funktion einfach direkt auf.

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

Um eine bestimmte Zeit zu erhalten, müssen wir der Funktion Parameter zuweisen. Es gibt zwei Möglichkeiten, Parameter zu schreiben:

• Zeichenfolge (häufig verwendet): zB. '01.01.2023 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)

Können Sie die Ausgabe des folgenden Codes vorhersagen?

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

B. Di 31. Okt 2023 00:00:00 GMT-0400 (Eastern Daylight Time)

C. Mittwoch , 01. November 2023, 00:00:00 GMT-0400 (Eastern Daylight Time)

D. Fr. 31. Nov. 2023 00:00:00 GMT-0400 (Eastern Daylight Time)

❗ Die Antwort ist A !

Warum?

new Date(2023, 10, 31) erstellt ein neues Date-Objekt mit dem Jahr 2023, dem Monat 10 (der November darstellt) und dem Tag 31. Da der November jedoch nur 30 Tage hat, wird das Date-Objekt „überrollt“. in den 1. Dezember, weshalb wir als Ausgabe Fr 01. Dez. 2023 00:00:00 GMT-0500 (Eastern Standard Time) erhalten.

Um ein Date-Objekt für den 31. Oktober 2023 zu erstellen, müssten wir new Date(2023, 9, 31) verwenden :

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

⏳ 'Get' - Gruppe

Die Gruppe „get“ kann verwendet werden, um bestimmte Teile eines Datumsobjekts abzurufen.

⭐ Erhalten Sie Jahr, Monat, Datum, Tag, Stunde, Minute und Sekunde

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

Es gibt vier Möglichkeiten, Zeitstempel zu erhalten:

• Das Date-Objekt berechnet die Zeit in Millisekunden seit dem 1. Januar 1970 (koordinierte Weltzeit oder UTC) .
• Da Millisekunden eine höhere Genauigkeit bieten und einzigartig sind, können sie zur Verschlüsselung verwendet werden.

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

⭐ Stellen Sie Jahr, Monat, Datum, Stunde, Minute und Sekunde ein

Hinweis: Wir müssen keinen Tag festlegen!

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)

Wir sehen oft Webseiten mit Countdown-Timern in Shopping-Apps, wie können wir also eine Countdown-Funktion entwerfen?

⌛ Grundformeln

Hier sind einige grundlegende Formeln zum Umrechnen von Millisekunden in Tage, Stunden, Minuten und Sekunden:

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;

Hier ist die Countdown-Funktion:

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] Erstellen Sie einen Countdown-Timer in nur 18 Zeilen Javascript – Sitepoint . (2020, 1. Juni).https://www.sitepoint.com/build-javascript-countdown-timer-no-dependencies/

[2] Datum und Uhrzeit .https://javascript.info/date

[3] Datum — Javascript | mdn . (2023, 21. Februar).https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date

[4] So erstellen Sie einen Countdown-Timer .https://www.w3schools.com/howto/howto_js_countdown.asp

[5] Javascript | Termine . Codeakademie.https://www.codecademy.com/resources/docs/javascript/dates

[6] Javascript-Datumsreferenz .https://www.w3schools.com/jsref/jsref_obj_date.asp

[7] Ninja. Best Buy-Anwendung