ts programowanie
unknown
typescript
2 years ago
4.1 kB
2
Indexable
const clockDisplay = document.querySelector(".box__clock__time") as HTMLElement; const dateDisplay = document.querySelector(".box__clock__date") as HTMLElement; const canvas = document.querySelector('#clock') as HTMLCanvasElement; canvas.width = canvas.height = 200; const ctx = canvas.getContext('2d') as CanvasRenderingContext2D; const timezoneSelect = document.querySelector(".box__clock_timezone-select") as HTMLSelectElement; function updateClock() { const date = new Date(); const selectedTimezone = timezoneSelect.value as string; const dateOptions: Intl.DateTimeFormatOptions = { day: "2-digit", month: "2-digit", year: "numeric", timeZone: selectedTimezone, }; const timeOptions: Intl.DateTimeFormatOptions = { hour: "2-digit", minute: "2-digit", second: "2-digit", hour12: false, timeZone: selectedTimezone, }; const dateString = date.toLocaleDateString('en-US', dateOptions).replace(/\//g, '.'); const timeString = date.toLocaleTimeString('en-US', timeOptions); const [hours, minutes, seconds] = timeString.split(':').map(num => parseInt(num, 10)); dateDisplay.innerHTML = dateString; clockDisplay.innerHTML = timeString; ctx.clearRect(0, 0, canvas.width, canvas.height); const centerX = canvas.width / 2; const centerY = canvas.height / 2; const radius = 80; ctx.translate(centerX, centerY); const hourAngle = (hours % 12) / 12 * 2 * Math.PI + minutes / 60 * 2 * Math.PI / 12; const hourHandLength = radius * 0.5; ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(Math.sin(hourAngle) * hourHandLength, -Math.cos(hourAngle) * hourHandLength); ctx.lineWidth = 3; ctx.stroke(); const minuteAngle = minutes / 60 * 2 * Math.PI; const minuteHandLength = radius * 0.9; ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(Math.sin(minuteAngle) * minuteHandLength, -Math.cos(minuteAngle) * minuteHandLength); ctx.strokeStyle = '#FFFFFF'; ctx.stroke(); const secondAngle = seconds / 60 * 2 * Math.PI; const secondHandLength = radius * 1; ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(Math.sin(secondAngle) * secondHandLength, -Math.cos(secondAngle) * secondHandLength); ctx.strokeStyle = '#FFFFFF'; ctx.stroke(); ctx.translate(-centerX, -centerY); ctx.font = '16px Montserrat'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.beginPath(); ctx.fillStyle = "white"; const offset = 10; for (let i = 1; i <= 12; i++) { const angle = i / 12 * 2 * Math.PI; const numberX = centerX + Math.sin(angle) * radius + offset; const numberY = centerY - Math.cos(angle) * radius - 3; ctx.fillText('.', numberX, numberY); } } updateClock(); setInterval(updateClock, 1000); const display = document.querySelector('.box__stopwatch__display') as HTMLSpanElement; const startButton = document.querySelector('.box__stopwatch__button--start') as HTMLButtonElement; const stopButton = document.querySelector('.box__stopwatch__button--stop') as HTMLButtonElement; const resetButton = document.querySelector('.box__stopwatch__button--reset') as HTMLButtonElement; let startTime: number = 0; let elapsedTime: number = 0; let timerId: number; const formatTime = (time: number): string => { const minutes = Math.floor(time / 60000); const seconds = ((time % 60000) / 1000).toFixed(0); const milliseconds = (time % 1000).toFixed(0).toString().padStart(3, '0'); return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}.${milliseconds}`; } const updateDisplay = () => { elapsedTime = Date.now() - startTime; display.textContent = formatTime(elapsedTime); } const startTimer = () => { startTime = Date.now() - elapsedTime; timerId = setInterval(updateDisplay, 10); } function stopTimer() { clearInterval(timerId); } const resetTimer = () => { clearInterval(timerId); elapsedTime = 0; display.textContent = '00:00.00'; } startButton.addEventListener('click', startTimer); stopButton.addEventListener('click', stopTimer); resetButton.addEventListener('click', resetTimer);