Задание таково: 2) Часы, показывающие время разных часовых поясов. это должно переключаться между собой кнопочками(ну,button из html) Достаточно по идее 3-4 кнопочек,(UTC +0,UTC+3,UTC+8) Пытался сделать через Date(),но там берет время конкретно твоего пк. P.S просто белый файл,без стилей и тд,сверху 3 кнопки ,а снизу время(в реальном времени)
egorikkfn, https://ru.stackoverflow.com/questi...ript-часы-выводящие-определенный-часовой-пояс это смотрел?
egorikkfn, You can add or subtract hours from your date with currentTime.setHours(currentTime.getHours()+offset); JS currentTime.setHours(currentTime.getHours()+offset); where offset is any number of hours.
```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> The post was merged to previous Mar 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'); }