Как сделать онлайн часы для другого пояса в моём случае?
Я сейчас прохожу курсы по js. И у меня было задания сделать аналоговые онлайн часы для своего региона(часового пояса). Как дополнительное задание для желающих, можно было сделать также и для других часовых поясов. Однако т.к. это доп.задание. Инфы в помощь решения не дали. Я читал статьи про timezone и ответы на похожие вопросы. Однако, как правильно это сделать для моего кода, я не понял. Подскажите пожалуйста, заранее благодарю
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100vh;
background: url('forest_road.jpg');
background-size: cover;
color: #fff;
text-align: center;
}
.clock {
width:350px;
height: 350px;
display: flex;
justify-content: center;
align-items: center;
background: url(clock.png);
background-size: cover;
border-radius: 50%;
box-shadow: 0 -15px 15px rgba(255,255,255,0.05),
inset 0 -15px 15px rgba(255,255,255,0.05),
0 15px 15px rgba(0,0,0,0.3),
inset 0 15px 15px rgba(0,0,0,0.3);
}
.clock:before {
content: '';
position: absolute;
width: 15px;
height: 15px;
background: #fff;
border-radius: 50%;
z-index: 10000;
}
.clock .hour, .clock .min, .clock .sec {
position: absolute;
}
.clock .hour, .hr, .hr2, .hr3 {
width: 160px;
height: 160px;
}
.clock .min, .mn, .mn2, .mn3 {
width: 190px;
height: 190px;
}
.clock .sec, .sc, .sc2, .sc3 {
width: 230px;
height: 230px;
}
.hr, .mn, .sc, .hr2, .hr3, .mn2, .mn3, .sc2, .sc3 {
display: flex;
justify-content: center;
position: absolute;
border-radius: 50%;
}
.hr:before, .hr2:before, .hr3:before {
content: '';
position: absolute;
width: 8px;
height: 80px;
background: #ff105e;
z-index: 10;
border-radius: 6px 6px 0 0;
}
.mn:before, .mn2:before, .mn3:before {
content: '';
position: absolute;
width: 4px;
height: 90px;
background: #fff;
z-index: 11;
border-radius: 6px 6px 0 0;
}
.sc:before, .sc2:before, .sc3:before {
content: '';
position: absolute;
width: 2px;
height: 150px;
background: #ff105e;
z-index: 12;
border-radius: 6px 6px 0 0;
}
h2 {
margin-top: 5%;
font-family: 'Oswald', sans-serif;
letter-spacing: 2px;
}
.container {
display: flex;
flex-direction: row;
}
.row3, .row1 {
padding-left: 2%;
}
@keyframes animate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS Clock</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@200&display=swap" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row row2">
<div class="clock">
<div class="hour">
<div class="hr2" id="hr2"></div>
</div>
<div class="min">
<div class="mn2" id="mn2"></div>
</div>
<div class="sec">
<div class="sc2" id="sc2"></div>
</div>
</div>
<h1>Tokio</h1>
<h2 id="time2"></h2>
</div>
<div class="row row1">
<div class="clock">
<div class="hour">
<div class="hr" id="hr"></div>
</div>
<div class="min">
<div class="mn" id="mn"></div>
</div>
<div class="sec">
<div class="sc" id="sc"></div>
</div>
</div>
<h1>It's my time(or your)</h1>
<h2 id="time"></h2>
</div>
<div class="row row3">
<div class="clock">
<div class="hour">
<div class="hr3" id="hr3"></div>
</div>
<div class="min">
<div class="mn3" id="mn3"></div>
</div>
<div class="sec">
<div class="sc3" id="sc3"></div>
</div>
</div>
<h1>London</h1>
<h2 id="time3"></h2>
</div>
</div>
<script type="text/javascript"> // Function of my time(your)
const deg = 6;
const hr = document.querySelector('#hr');
const mn = document.querySelector('#mn');
const sc = document.querySelector('#sc');
setInterval(() => {
let day = new Date();
let hh = day.getHours() * 30;
let mm = day.getMinutes() * deg;
let ss = day.getSeconds() * deg;
hr.style.transform = `rotateZ(${(hh)+(mm / 12)}deg)`;
mn.style.transform = `rotateZ(${mm}deg)`;
sc.style.transform = `rotateZ(${ss}deg)`;
})
</script>
<script type="text/javascript">// Time recording function as a string(my or your)
function clock(){
var date = new Date(),
years = (date.getFullYear()),
weekday = new Array('Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'),
week = (weekday[date.getDay()]),
day = (date.getDate()),
months = new Array('January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'),
month = (months[date.getMonth()]),
hours = (date.getHours() < 10) ? '0' + date.getHours() : date.getHours(),
minutes = (date.getMinutes() < 10) ? '0' + date.getMinutes() : date.getMinutes(),
seconds = (date.getSeconds() < 10) ? '0' + date.getSeconds() : date.getSeconds();
document.getElementById('time').innerHTML = hours + ':' + minutes + ':' + seconds + " " + week + ", " + month + " " + day + ", " + years;
}
setInterval(clock, 1);
clock();
</script>
<script type="text/javascript"> // Function of my time(your)
const deg2 = 6;
const hr2 = document.querySelector('#hr2');
const mn2 = document.querySelector('#mn2');
const sc2 = document.querySelector('#sc2');
setInterval(() => {
let day2 = new Date();
let hh = day2.getHours() * 30 ;
let mm = day2.getMinutes() * deg;
let ss = day2.getSeconds() * deg;
hr2.style.transform = `rotateZ(${(hh)+(mm / 12)}deg)`;
mn2.style.transform = `rotateZ(${mm}deg)`;
sc2.style.transform = `rotateZ(${ss}deg)`;
})
</script>
<script type="text/javascript">// Time recording function as a string(my or your)
function clock(){
var date = new Date(),
years = (date.getFullYear()),
weekday = new Array('Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'),
week = (weekday[date.getDay()]),
day = (date.getDate()),
months = new Array('January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'),
month = (months[date.getMonth()]),
hours = (date.getHours() < 10) ? '0' + date.getHours() : date.getHours(),
minutes = (date.getMinutes() < 10) ? '0' + date.getMinutes() : date.getMinutes(),
seconds = (date.getSeconds() < 10) ? '0' + date.getSeconds() : date.getSeconds();
document.getElementById('time2').innerHTML = hours + ':' + minutes + ':' + seconds + " " + week + ", " + month + " " + day + ", " + years;
}
setInterval(clock, 1);
clock();
</script>
<script type="text/javascript"> // Function of my time(your)
const deg3 = 6;
const hr3 = document.querySelector('#hr3');
const mn3 = document.querySelector('#mn3');
const sc3 = document.querySelector('#sc3');
setInterval(() => {
let day3 = new Date();
let hh = day3.getHours() * 30;
let mm = day3.getMinutes() * deg;
let ss = day3.getSeconds() * deg;
hr3.style.transform = `rotateZ(${(hh)+(mm / 12)}deg)`;
mn3.style.transform = `rotateZ(${mm}deg)`;
sc3.style.transform = `rotateZ(${ss}deg)`;
})
</script>
<script type="text/javascript">// Time recording function as a string(my or your)
function clock(){
var date = new Date(),
years = (date.getFullYear()),
weekday = new Array('Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'),
week = (weekday[date.getDay()]),
day = (date.getDate()),
months = new Array('January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'),
month = (months[date.getMonth()]),
hours = (date.getHours( ) < 10) ? '0' + date.getHours() : date.getHours(),
minutes = (date.getMinutes() < 10) ? '0' + date.getMinutes() : date.getMinutes(),
seconds = (date.getSeconds() < 10) ? '0' + date.getSeconds() : date.getSeconds();
document.getElementById('time3').innerHTML = hours + ':' + minutes + ':' + seconds + " " + week + ", " + month + " " + day + ", " + years;
}
setInterval(clock, 1);
clock();
</script>
</body>
</html