如何编辑时钟代码让分针以30为间隔变化
How to edit clock code in so minute hand changes at interval of 30
我目前有一个从 javascript、css 和 html 创建的时钟。我试图找到编辑 javascript 的方法,这样如果我将 .5 或 +30 添加到 html 以获取时区偏移量,分针也会进行调整,在当前位置增加 30 分钟。我还希望时针在这个 +30 分钟间隔发生时更新,这样当分针达到 60 时,时针也会调整到下一个小时。谢谢!
class Clock {
constructor(id) {
this.timezone = parseInt(document.getElementById(id).dataset.timezone);
if (this.isDST(new Date())) {
this.timezone += 1;
}
this.handSeconds = document.querySelector(`#${id} .hand.seconds`);
this.handMinutes = document.querySelector(`#${id} .hand.minutes`);
this.handHours = document.querySelector(`#${id} .hand.hours`);
this.getTime();
this.cycle();
}
isDST(now) {
const jan = new Date(now.getFullYear(), 0, 1);
const jul = new Date(now.getFullYear(), 6, 1);
const dst = Math.max(jan.getTimezoneOffset(), jul.getTimezoneOffset());
return now.getTimezoneOffset() < dst;
}
draw(hours, minutes, seconds) {
const drawSeconds = (seconds / 60) * 360 + 90;
const drawMinutes = (minutes / 60) * 360 + 90;
const drawHours = (hours / 12) * 360 + 90;
this.handSeconds.style.transform = `rotate(${drawSeconds}deg)`;
this.handMinutes.style.transform = `rotate(${drawMinutes}deg)`;
this.handHours.style.transform = `rotate(${drawHours}deg)`;
// fix for animation bump on when clock hands hit zero
if (drawSeconds === 444 || drawSeconds === 90) {
this.handSeconds.style.transition = "all 0s ease 0s";
} else {
this.handSeconds.style.transition =
"all 0.05s cubic-bezier(0, 0, 0.52, 2.51) 0s";
}
}
getTime() {
const now = new Date();
const hours = now.getUTCHours() + this.timezone;
const minutes = now.getUTCMinutes();
const seconds = now.getUTCSeconds();
this.draw(hours, minutes, seconds);
}
cycle() {
setInterval(this.getTime.bind(this), 1000);
}
}
new Clock("okinawa");
new Clock("seattle");
new Clock("amalfi");
html {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: #673AB7;
overflow: hidden;
}
.content {
display: flex;
align-items: center;
}
.content .widget {
padding: 24px;
margin: 24px;
}
.content .widget.clock {
position: relative;
width: 456px;
height: 456px;
border-radius: 100%;
box-sizing: border-box;
background-color: #5A2EA5;
}
.content .widget.clock#okinawa,
.content .widget.clock#amalfi {
width: 240px;
height: 240px;
}
.content .widget.clock#okinawa:before,
.content .widget.clock#amalfi:before {
border-width: 3px;
}
.content .widget.clock#okinawa .hand,
.content .widget.clock#amalfi .hand {
height: 3px;
top: 118.5px;
transform-origin: right 1.5px;
}
.content .widget.clock#okinawa .hand.seconds,
.content .widget.clock#amalfi .hand.seconds {
display: yes;
}
.content .widget.clock:before {
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
border: 6px solid #FFF;
border-radius: 100%;
box-sizing: border-box;
}
.content .widget.clock .shadow {
content: "";
width: 100%;
height: 500px;
position: absolute;
top: 50%;
left: 0;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
transform: rotate(-45deg);
transform-origin: 50% 0%;
opacity: 0.3;
z-index: -1;
}
.content .widget.clock .hand {
height: 6px;
position: absolute;
top: 225px;
background-color: #FFF;
border-radius: 100% 0% 0% 100%;
transform-origin: right 3px;
transition: all 0.05s cubic-bezier(0, 0, 0.52, 2.51) 0s;
}
.content .widget.clock .hand.seconds {
width: 45%;
left: 5%;
opacity: 0.25;
}
.content .widget.clock .hand.minutes {
width: 35%;
left: 15%;
opacity: 0.5;
}
.content .widget.clock .hand.hours {
width: 25%;
left: 25%;
opacity: 0.75;
}
.content .widget.clock .hand-cap {
width: 5%;
height: 5%;
position: absolute;
top: 47.5%;
left: 47.5%;
background-color: #FFF;
border-radius: 100%;
}
.content .widget label {
display: block;
width: 100%;
position: absolute;
top: -24px;
left: 0;
font-family: sans-serif;
font-weight: 200;
font-size: 12px;
text-transform: uppercase;
text-align: center;
letter-spacing: 4px;
color: #FFF;
opacity: 0.5;
}
<div class="content">
<div class="widget clock" id="okinawa" data-timezone="+9">
<div class="shadow"></div>
<div class="hand seconds"></div>
<div class="hand minutes"></div>
<div class="hand hours"></div>
<div class="hand-cap"></div>
<label>Okinawa</label>
</div>
<div class="widget clock" id="seattle" data-timezone="-8">
<div class="shadow"></div>
<div class="hand seconds"></div>
<div class="hand minutes"></div>
<div class="hand hours"></div>
<div class="hand-cap"></div>
<label>Seattle</label>
</div>
<div class="widget clock" id="amalfi" data-timezone="+1">
<div class="shadow"></div>
<div class="hand seconds"></div>
<div class="hand minutes"></div>
<div class="hand hours"></div>
<div class="hand-cap"></div>
<label>Amalfi</label>
</div>
</div>
你的意思是这样?
获取以小时和分钟为单位的时间(如果存在)
this.timezone = document.getElementById(id).dataset.timezone;
let [hh,mm] = this.timezone.slice(1).split("."); // remove the +/- before splitting
this.timezoneMM = 60*hh +(mm ? parseInt(mm) : 0)
this.timezoneMM *= this.timezone.indexOf("-")===0 ? -1:-1;
将分钟添加到 now 对象
now.setMinutes(now.getMinutes()+this.timezoneMM)
class Clock {
constructor(id) {
this.timezone = document.getElementById(id).dataset.timezone;
let [hh,mm] = this.timezone.slice(1).split("."); // remove the +/- before splitting
this.timezoneMM = 60*hh +(mm ? parseInt(mm) : 0)
this.timezoneMM *= this.timezone.indexOf("-")===0 ? -1:-1;
if (this.isDST(new Date())) {
this.timezone += 1;
}
this.handSeconds = document.querySelector(`#${id} .hand.seconds`);
this.handMinutes = document.querySelector(`#${id} .hand.minutes`);
this.handHours = document.querySelector(`#${id} .hand.hours`);
this.getTime();
this.cycle();
}
isDST(now) {
const jan = new Date(now.getFullYear(), 0, 1);
const jul = new Date(now.getFullYear(), 6, 1);
const dst = Math.max(jan.getTimezoneOffset(), jul.getTimezoneOffset());
return now.getTimezoneOffset() < dst;
}
draw(hours, minutes, seconds) {
const drawSeconds = (seconds / 60) * 360 + 90;
const drawMinutes = (minutes / 60) * 360 + 90;
const drawHours = (hours / 12) * 360 + 90;
this.handSeconds.style.transform = `rotate(${drawSeconds}deg)`;
this.handMinutes.style.transform = `rotate(${drawMinutes}deg)`;
this.handHours.style.transform = `rotate(${drawHours}deg)`;
// fix for animation bump on when clock hands hit zero
if (drawSeconds === 444 || drawSeconds === 90) {
this.handSeconds.style.transition = "all 0s ease 0s";
} else {
this.handSeconds.style.transition =
"all 0.05s cubic-bezier(0, 0, 0.52, 2.51) 0s";
}
}
getTime() {
const now = new Date();
now.setMinutes(now.getMinutes()+this.timezoneMM)
const hours = now.getUTCHours();
const minutes = now.getUTCMinutes();
const seconds = now.getUTCSeconds();
this.draw(hours, minutes, seconds);
}
cycle() {
setInterval(this.getTime.bind(this), 1000);
}
}
new Clock("okinawa");
new Clock("kolkata");
new Clock("amalfi");
html {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: #673AB7;
overflow: hidden;
}
.content {
display: flex;
align-items: center;
}
.content .widget {
padding: 24px;
margin: 24px;
}
.content .widget.clock {
position: relative;
width: 456px;
height: 456px;
border-radius: 100%;
box-sizing: border-box;
background-color: #5A2EA5;
}
.content .widget.clock#okinawa,
.content .widget.clock#amalfi {
width: 240px;
height: 240px;
}
.content .widget.clock#okinawa:before,
.content .widget.clock#amalfi:before {
border-width: 3px;
}
.content .widget.clock#okinawa .hand,
.content .widget.clock#amalfi .hand {
height: 3px;
top: 118.5px;
transform-origin: right 1.5px;
}
.content .widget.clock#okinawa .hand.seconds,
.content .widget.clock#amalfi .hand.seconds {
display: none;
}
.content .widget.clock:before {
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
border: 6px solid #FFF;
border-radius: 100%;
box-sizing: border-box;
}
.content .widget.clock .shadow {
content: "";
width: 100%;
height: 500px;
position: absolute;
top: 50%;
left: 0;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
transform: rotate(-45deg);
transform-origin: 50% 0%;
opacity: 0.3;
z-index: -1;
}
.content .widget.clock .hand {
height: 6px;
position: absolute;
top: 225px;
background-color: #FFF;
border-radius: 100% 0% 0% 100%;
transform-origin: right 3px;
transition: all 0.05s cubic-bezier(0, 0, 0.52, 2.51) 0s;
}
.content .widget.clock .hand.seconds {
width: 45%;
left: 5%;
opacity: 0.25;
}
.content .widget.clock .hand.minutes {
width: 35%;
left: 15%;
opacity: 0.5;
}
.content .widget.clock .hand.hours {
width: 25%;
left: 25%;
opacity: 0.75;
}
.content .widget.clock .hand-cap {
width: 5%;
height: 5%;
position: absolute;
top: 47.5%;
left: 47.5%;
background-color: #FFF;
border-radius: 100%;
}
.content .widget label {
display: block;
width: 100%;
position: absolute;
top: -24px;
left: 0;
font-family: sans-serif;
font-weight: 200;
font-size: 12px;
text-transform: uppercase;
text-align: center;
letter-spacing: 4px;
color: #FFF;
opacity: 0.5;
}
<div class="content">
<div class="widget clock" id="okinawa" data-timezone="+9">
<div class="shadow"></div>
<div class="hand seconds"></div>
<div class="hand minutes"></div>
<div class="hand hours"></div>
<div class="hand-cap"></div>
<label>Okinawa</label>
</div>
<div class="widget clock" id="kolkata" data-timezone="+5.30">
<div class="shadow"></div>
<div class="hand seconds"></div>
<div class="hand minutes"></div>
<div class="hand hours"></div>
<div class="hand-cap"></div>
<label>Kolkata</label>
</div>
<div class="widget clock" id="amalfi" data-timezone="+1">
<div class="shadow"></div>
<div class="hand seconds"></div>
<div class="hand minutes"></div>
<div class="hand hours"></div>
<div class="hand-cap"></div>
<label>Amalfi</label>
</div>
</div>
我目前有一个从 javascript、css 和 html 创建的时钟。我试图找到编辑 javascript 的方法,这样如果我将 .5 或 +30 添加到 html 以获取时区偏移量,分针也会进行调整,在当前位置增加 30 分钟。我还希望时针在这个 +30 分钟间隔发生时更新,这样当分针达到 60 时,时针也会调整到下一个小时。谢谢!
class Clock {
constructor(id) {
this.timezone = parseInt(document.getElementById(id).dataset.timezone);
if (this.isDST(new Date())) {
this.timezone += 1;
}
this.handSeconds = document.querySelector(`#${id} .hand.seconds`);
this.handMinutes = document.querySelector(`#${id} .hand.minutes`);
this.handHours = document.querySelector(`#${id} .hand.hours`);
this.getTime();
this.cycle();
}
isDST(now) {
const jan = new Date(now.getFullYear(), 0, 1);
const jul = new Date(now.getFullYear(), 6, 1);
const dst = Math.max(jan.getTimezoneOffset(), jul.getTimezoneOffset());
return now.getTimezoneOffset() < dst;
}
draw(hours, minutes, seconds) {
const drawSeconds = (seconds / 60) * 360 + 90;
const drawMinutes = (minutes / 60) * 360 + 90;
const drawHours = (hours / 12) * 360 + 90;
this.handSeconds.style.transform = `rotate(${drawSeconds}deg)`;
this.handMinutes.style.transform = `rotate(${drawMinutes}deg)`;
this.handHours.style.transform = `rotate(${drawHours}deg)`;
// fix for animation bump on when clock hands hit zero
if (drawSeconds === 444 || drawSeconds === 90) {
this.handSeconds.style.transition = "all 0s ease 0s";
} else {
this.handSeconds.style.transition =
"all 0.05s cubic-bezier(0, 0, 0.52, 2.51) 0s";
}
}
getTime() {
const now = new Date();
const hours = now.getUTCHours() + this.timezone;
const minutes = now.getUTCMinutes();
const seconds = now.getUTCSeconds();
this.draw(hours, minutes, seconds);
}
cycle() {
setInterval(this.getTime.bind(this), 1000);
}
}
new Clock("okinawa");
new Clock("seattle");
new Clock("amalfi");
html {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: #673AB7;
overflow: hidden;
}
.content {
display: flex;
align-items: center;
}
.content .widget {
padding: 24px;
margin: 24px;
}
.content .widget.clock {
position: relative;
width: 456px;
height: 456px;
border-radius: 100%;
box-sizing: border-box;
background-color: #5A2EA5;
}
.content .widget.clock#okinawa,
.content .widget.clock#amalfi {
width: 240px;
height: 240px;
}
.content .widget.clock#okinawa:before,
.content .widget.clock#amalfi:before {
border-width: 3px;
}
.content .widget.clock#okinawa .hand,
.content .widget.clock#amalfi .hand {
height: 3px;
top: 118.5px;
transform-origin: right 1.5px;
}
.content .widget.clock#okinawa .hand.seconds,
.content .widget.clock#amalfi .hand.seconds {
display: yes;
}
.content .widget.clock:before {
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
border: 6px solid #FFF;
border-radius: 100%;
box-sizing: border-box;
}
.content .widget.clock .shadow {
content: "";
width: 100%;
height: 500px;
position: absolute;
top: 50%;
left: 0;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
transform: rotate(-45deg);
transform-origin: 50% 0%;
opacity: 0.3;
z-index: -1;
}
.content .widget.clock .hand {
height: 6px;
position: absolute;
top: 225px;
background-color: #FFF;
border-radius: 100% 0% 0% 100%;
transform-origin: right 3px;
transition: all 0.05s cubic-bezier(0, 0, 0.52, 2.51) 0s;
}
.content .widget.clock .hand.seconds {
width: 45%;
left: 5%;
opacity: 0.25;
}
.content .widget.clock .hand.minutes {
width: 35%;
left: 15%;
opacity: 0.5;
}
.content .widget.clock .hand.hours {
width: 25%;
left: 25%;
opacity: 0.75;
}
.content .widget.clock .hand-cap {
width: 5%;
height: 5%;
position: absolute;
top: 47.5%;
left: 47.5%;
background-color: #FFF;
border-radius: 100%;
}
.content .widget label {
display: block;
width: 100%;
position: absolute;
top: -24px;
left: 0;
font-family: sans-serif;
font-weight: 200;
font-size: 12px;
text-transform: uppercase;
text-align: center;
letter-spacing: 4px;
color: #FFF;
opacity: 0.5;
}
<div class="content">
<div class="widget clock" id="okinawa" data-timezone="+9">
<div class="shadow"></div>
<div class="hand seconds"></div>
<div class="hand minutes"></div>
<div class="hand hours"></div>
<div class="hand-cap"></div>
<label>Okinawa</label>
</div>
<div class="widget clock" id="seattle" data-timezone="-8">
<div class="shadow"></div>
<div class="hand seconds"></div>
<div class="hand minutes"></div>
<div class="hand hours"></div>
<div class="hand-cap"></div>
<label>Seattle</label>
</div>
<div class="widget clock" id="amalfi" data-timezone="+1">
<div class="shadow"></div>
<div class="hand seconds"></div>
<div class="hand minutes"></div>
<div class="hand hours"></div>
<div class="hand-cap"></div>
<label>Amalfi</label>
</div>
</div>
你的意思是这样?
获取以小时和分钟为单位的时间(如果存在)
this.timezone = document.getElementById(id).dataset.timezone; let [hh,mm] = this.timezone.slice(1).split("."); // remove the +/- before splitting this.timezoneMM = 60*hh +(mm ? parseInt(mm) : 0) this.timezoneMM *= this.timezone.indexOf("-")===0 ? -1:-1;
将分钟添加到 now 对象
now.setMinutes(now.getMinutes()+this.timezoneMM)
class Clock { constructor(id) { this.timezone = document.getElementById(id).dataset.timezone; let [hh,mm] = this.timezone.slice(1).split("."); // remove the +/- before splitting this.timezoneMM = 60*hh +(mm ? parseInt(mm) : 0) this.timezoneMM *= this.timezone.indexOf("-")===0 ? -1:-1; if (this.isDST(new Date())) { this.timezone += 1; } this.handSeconds = document.querySelector(`#${id} .hand.seconds`); this.handMinutes = document.querySelector(`#${id} .hand.minutes`); this.handHours = document.querySelector(`#${id} .hand.hours`); this.getTime(); this.cycle(); } isDST(now) { const jan = new Date(now.getFullYear(), 0, 1); const jul = new Date(now.getFullYear(), 6, 1); const dst = Math.max(jan.getTimezoneOffset(), jul.getTimezoneOffset()); return now.getTimezoneOffset() < dst; } draw(hours, minutes, seconds) { const drawSeconds = (seconds / 60) * 360 + 90; const drawMinutes = (minutes / 60) * 360 + 90; const drawHours = (hours / 12) * 360 + 90; this.handSeconds.style.transform = `rotate(${drawSeconds}deg)`; this.handMinutes.style.transform = `rotate(${drawMinutes}deg)`; this.handHours.style.transform = `rotate(${drawHours}deg)`; // fix for animation bump on when clock hands hit zero if (drawSeconds === 444 || drawSeconds === 90) { this.handSeconds.style.transition = "all 0s ease 0s"; } else { this.handSeconds.style.transition = "all 0.05s cubic-bezier(0, 0, 0.52, 2.51) 0s"; } } getTime() { const now = new Date(); now.setMinutes(now.getMinutes()+this.timezoneMM) const hours = now.getUTCHours(); const minutes = now.getUTCMinutes(); const seconds = now.getUTCSeconds(); this.draw(hours, minutes, seconds); } cycle() { setInterval(this.getTime.bind(this), 1000); } } new Clock("okinawa"); new Clock("kolkata"); new Clock("amalfi");
html { height: 100%; display: flex; justify-content: center; align-items: center; background-color: #673AB7; overflow: hidden; } .content { display: flex; align-items: center; } .content .widget { padding: 24px; margin: 24px; } .content .widget.clock { position: relative; width: 456px; height: 456px; border-radius: 100%; box-sizing: border-box; background-color: #5A2EA5; } .content .widget.clock#okinawa, .content .widget.clock#amalfi { width: 240px; height: 240px; } .content .widget.clock#okinawa:before, .content .widget.clock#amalfi:before { border-width: 3px; } .content .widget.clock#okinawa .hand, .content .widget.clock#amalfi .hand { height: 3px; top: 118.5px; transform-origin: right 1.5px; } .content .widget.clock#okinawa .hand.seconds, .content .widget.clock#amalfi .hand.seconds { display: none; } .content .widget.clock:before { content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; border: 6px solid #FFF; border-radius: 100%; box-sizing: border-box; } .content .widget.clock .shadow { content: ""; width: 100%; height: 500px; position: absolute; top: 50%; left: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%); transform: rotate(-45deg); transform-origin: 50% 0%; opacity: 0.3; z-index: -1; } .content .widget.clock .hand { height: 6px; position: absolute; top: 225px; background-color: #FFF; border-radius: 100% 0% 0% 100%; transform-origin: right 3px; transition: all 0.05s cubic-bezier(0, 0, 0.52, 2.51) 0s; } .content .widget.clock .hand.seconds { width: 45%; left: 5%; opacity: 0.25; } .content .widget.clock .hand.minutes { width: 35%; left: 15%; opacity: 0.5; } .content .widget.clock .hand.hours { width: 25%; left: 25%; opacity: 0.75; } .content .widget.clock .hand-cap { width: 5%; height: 5%; position: absolute; top: 47.5%; left: 47.5%; background-color: #FFF; border-radius: 100%; } .content .widget label { display: block; width: 100%; position: absolute; top: -24px; left: 0; font-family: sans-serif; font-weight: 200; font-size: 12px; text-transform: uppercase; text-align: center; letter-spacing: 4px; color: #FFF; opacity: 0.5; }
<div class="content"> <div class="widget clock" id="okinawa" data-timezone="+9"> <div class="shadow"></div> <div class="hand seconds"></div> <div class="hand minutes"></div> <div class="hand hours"></div> <div class="hand-cap"></div> <label>Okinawa</label> </div> <div class="widget clock" id="kolkata" data-timezone="+5.30"> <div class="shadow"></div> <div class="hand seconds"></div> <div class="hand minutes"></div> <div class="hand hours"></div> <div class="hand-cap"></div> <label>Kolkata</label> </div> <div class="widget clock" id="amalfi" data-timezone="+1"> <div class="shadow"></div> <div class="hand seconds"></div> <div class="hand minutes"></div> <div class="hand hours"></div> <div class="hand-cap"></div> <label>Amalfi</label> </div> </div>