Javascript clock + css

时间:2017-04-11 13:40:25

标签: javascript css

我正在做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度角,所以这只是修复偏移量。

我了解除分配给setDatehourDegrees的陈述之外的所有内容。

为什么教育工作者将minsDegrees+ ((seconds/60)*6)添加到+ ((mins/60)*30)hourDegrees

2 个答案:

答案 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) 导致这些微小的边缘运动,分针会直接从一个点移动到另一个点。