我正在做Javascript30.com课程,我们必须用秒,分钟和小时做一个JS时钟。这是代码:
{
"query": {
"bool": {
"must_not": [
{
"exists": {
"field": "retweeted_status"
}
}
],
"filter": [
{
"bool": {
"should": [
{
"match": {
"entities.urls.display_url": "blabla.com"
}
},
{
"match": {
"entities.urls.display_url": "blibli.com"
}
}
]
}
}
]
}
}
}
和JS:
<div class="clock">
<div class="clock-face">
<div class="hand hour-hand"></div>
<div class="hand min-hand"></div>
<div class="hand second-hand"></div>
</div>
</div>
const secondHand = document.querySelector('.second-hand');
const minsHand = document.querySelector('.min-hand');
const hourHand = document.querySelector('.hour-hand');
function setDate() {
const now = new Date();
const seconds = now.getSeconds();
const secondsDegrees = ((seconds / 60) * 360) + 90;
secondHand.style.transform = `rotate(${secondsDegrees}deg)`;
const mins = now.getMinutes();
const minsDegrees = ((mins / 60) * 360) + ((seconds/60)*6) + 90;
minsHand.style.transform = `rotate(${minsDegrees}deg)`;
const hour = now.getHours();
const hourDegrees = ((hour / 12) * 360) + ((mins/60)*30) + 90;
hourHand.style.transform = `rotate(${hourDegrees}deg)`;
}
setInterval(setDate, 1000);
setDate();
函数中的+ 90
部分是偏移量 - 因为我们正在制作JS时钟,我们使用CSS将箭头转换为90度角,所以这只是修复偏移量。
我了解除分配给setDate
和hourDegrees
的陈述之外的所有内容。
为什么教育工作者将minsDegrees
和+ ((seconds/60)*6)
添加到+ ((mins/60)*30)
和hourDegrees
?
答案 0 :(得分:1)
每60秒为下一个位置准备分针,每个60分钟的刻度与时针相同。
假设时间为17:17:41
计算分针现在的分度
minsDegrees = (17/60) * 360 = 102
加;
计算我们分针所经过的秒数;
theDegreeFromSeconds = (41/60) *
的 6
强> = 4.1
minDegree = 102 + 4.1 = 106.1
我们乘以6,因为每次经过第二次在时钟顺时针旋转6°。小时度计算也是一样。
答案 1 :(得分:1)
TL;博士 没有 ((seconds/60) * 6) 和 ((mins/60)*30),分钟的变化(即 60 秒完成后 15 分钟到 16 分钟)和小时的变化(即 3:00 到 4:00 - 之后60 分钟完成)将他们各自的手从一个点直接旋转到另一个点,是的过渡将使它平滑,这样旋转动作就不会被注意到。
添加 ((seconds/60) * 6) 确保分针在每秒计数后略微增加。分针可以改变的最大角度是 6 度,以 360 度/60 分钟计算。现在,每秒计数将导致分针旋转 6/60s = 0.1deg,这相当于 60s 计数后的 0.1 * 60s = 6deg。当您仔细观察分针时,您会注意到在每秒钟计时后分针的细微旋转运动。每个小的边际移动是 0.1 度。否则,分针会直接从一个点移动到另一个点。
添加 ((mins/60)*30) 还可确保每分钟计数后 HOUR 指针的边际增加。分针可以旋转的最大度数是从 360 度/12 小时计算出来的 30 度。每分钟计数不是秒计数现在将导致时针旋转 30/60 分钟 = 0.5 度,相当于 0.5 * 60 分钟 = 30 度。 30 度将是从一小时到另一小时的最大旋转运动。即 3:00 到 4:00。在每分钟计数后,从时针上可以看到边缘运动。时针的每个小边缘运动是 0.5 度。 *如果没有 ((mins/60)30) 导致这些微小的边缘运动,分针会直接从一个点移动到另一个点。