Skip to content

21. Zegar ze strefami czasowymi

This content is not available in your language yet.

Aplikacja wyświetlająca aktualny czas w wielu strefach czasowych jednocześnie — analogowe lub cyfrowe zegary.

// Intl.DateTimeFormat dla stref czasowych
function getTimeInZone(timezone) {
return new Intl.DateTimeFormat('pl-PL', {
timeZone: timezone,
hour: '2-digit',
minute: '2-digit',
second: '2-digit',
hour12: false,
}).format(new Date());
}
// Przykład: getTimeInZone('America/New_York') => "14:30:05"
const TIMEZONES = [
{ id: 'warsaw', label: 'Warszawa', tz: 'Europe/Warsaw' },
{ id: 'london', label: 'Londyn', tz: 'Europe/London' },
{ id: 'new_york', label: 'Nowy Jork', tz: 'America/New_York' },
{ id: 'tokyo', label: 'Tokio', tz: 'Asia/Tokyo' },
{ id: 'sydney', label: 'Sydney', tz: 'Australia/Sydney' },
];
  • Minimum 5 zegarów cyfrowych (predefiniowane strefy)
  • Aktualizacja co sekundę (setInterval)
  • Wyświetlenie nazwy miasta i strefy czasowej
  • Format 24h i 12h (przełącznik)
Ocena: 3.0

Powodzenia!

Zegar stref czasowych to projekt, w którym Intl.DateTimeFormat robi całą ciężką pracę. Analogowy zegar SVG (wariant B) jest zaskakująco prosty — kąt wskazówki to (wartość / max) * 360 stopni. Dla sekund: (seconds / 60) * 360. Elegancki, minimalistyczny design to klucz sukcesu tego projektu!