Задание таково: 2) Часы, показывающие время разных часовых поясов. это должно переключаться между собой кнопочками(ну,button из html) Достаточно по идее 3-4 кнопочек,(UTC +0,UTC+3,UTC+8) Пытался сделать через Date(),но там берет время конкретно твоего пк. P.S просто белый файл,без стилей и тд,сверху 3 кнопки ,а снизу время(в реальном времени)
Привет, МистерЛис! Я могу помочь с этим заданием. Давай начнем с создания HTML-файла с кнопками для различных часовых поясов и блока для отображения времени. После этого мы добавим JavaScript для обновления времени в реальном времени. Давай начнем с HTML. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Часы с разными часовыми поясами</title> </head> <body> <button id="utc0">UTC +0</button> <button id="utc3">UTC +3</button> <button id="utc8">UTC +8</button> <div id="timeDisplay"></div> <script> // JavaScript код будет здесь </script> </body> </html> HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Часы с разными часовыми поясами</title> </head> <body> <button id="utc0">UTC +0</button> <button id="utc3">UTC +3</button> <button id="utc8">UTC +8</button> <div id="timeDisplay"></div> <script> // JavaScript код будет здесь </script> </body> </html>
```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>World Clock</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="clock"> <h1>World Clock</h1> <div class="clock-container"> <div id="clock-0" class="clock-display active"></div> <div id="clock-3" class="clock-display"></div> <div id="clock-8" class="clock-display"></div> </div> <div class="buttons"> <button id="btn-0" class="active" onclick="showClock(0)">UTC +0</button> <button id="btn-3" onclick="showClock(3)">UTC +3</button> <button id="btn-8" onclick="showClock(8)">UTC +8</button> </div> </div> <script src="script.js"></script> </body> </html> HTML ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>World Clock</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="clock"> <h1>World Clock</h1> <div class="clock-container"> <div id="clock-0" class="clock-display active"></div> <div id="clock-3" class="clock-display"></div> <div id="clock-8" class="clock-display"></div> </div> <div class="buttons"> <button id="btn-0" class="active" onclick="showClock(0)">UTC +0</button> <button id="btn-3" onclick="showClock(3)">UTC +3</button> <button id="btn-8" onclick="showClock(8)">UTC +8</button> </div> </div> <script src="script.js"></script> </body> </html> --- Сообщение объединено с предыдущим 20 мар 2024 javascript function showClock(offset) { const now = new Date(); const localTime = now.getTime(); const localOffset = now.getTimezoneOffset() * 60000; const utc = localTime + localOffset; const targetTime = utc + (3600000 * offset); const targetDate = new Date(targetTime); const hours = targetDate.getHours(); const minutes = targetDate.getMinutes(); const seconds = targetDate.getSeconds(); const clockDisplays = document.querySelectorAll('.clock-display'); clockDisplays.forEach(clockDisplay => { clockDisplay.classList.remove('active'); }); const clock = document.getElementById('clock-' + offset); clock.innerHTML = `${hours}:${minutes}:${seconds}`; clock.classList.add('active'); } JS javascript function showClock(offset) { const now = new Date(); const localTime = now.getTime(); const localOffset = now.getTimezoneOffset() * 60000; const utc = localTime + localOffset; const targetTime = utc + (3600000 * offset); const targetDate = new Date(targetTime); const hours = targetDate.getHours(); const minutes = targetDate.getMinutes(); const seconds = targetDate.getSeconds(); const clockDisplays = document.querySelectorAll('.clock-display'); clockDisplays.forEach(clockDisplay => { clockDisplay.classList.remove('active'); }); const clock = document.getElementById('clock-' + offset); clock.innerHTML = `${hours}:${minutes}:${seconds}`; clock.classList.add('active'); }