JavaScript 練習 - 時鐘功能

PV:

Demo

JavaScript 練習 - Clock - Demo

1. Introduction 介紹

這是 六角學院的一個小挑戰，使用 JavaScript 原生語法獲取時間，並且讓時針持續轉動，實現時鐘功能。

  • 使用 JavaScript 原生語法的 getDate() 獲取時間
  • 使用 JavaScript 原生語法的 setInterval() 方式讓指針持續轉動。
  • 使用 for 迴圈渲染出鐘面
  • 以 nth-child(n) 改變重疊圖示的傾斜角度

2. 功能

1
2
3
4
5
6
7
8
9
10
11
12
<div class="clock"></div>
<div class="clock-m"></div>

<div class="clock-hand">
  <div class="hand-hour"></div>
  <div class="hand-min"></div>
  <div class="hand-sec">
    <div class="round">
      <div></div>
    </div>
  </div>
</div>

首先刻出鐘面的底

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
.clock {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 350px;
  height: 350px;
  background-color: $light-green-color;
  border-radius: 80px;

  &::before {
    position: absolute;
    width: 310px;
    height: 310px;
    background-color: $green-color;
    border-radius: 100%;
    content: "";
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    border: 3px solid #212f0b;
  }
}

接著要開始做鐘面，這裡分為兩個部分進行，這兩層的作法是類似的：

  1. 12 小時及橘色的區間
  2. 60 分鐘及白色小點

先設定數字及中間橘色的分隔線先以中上的 24-12 為基準點

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.hour-wrap {
  position: absolute;
  left: 48%;

  top: 25px;
  text-align: center;
  color: white;
  font-size: 14px;
  transform-origin: 45% 245%;

  .line {
    display: block;
    width: 1px;
    height: 14px;
    background: $orange-color;
    margin: 8px auto;
  }
}

並且用 for 迴圈，推出所有畫面所需的小時標示，所有的標示並寫入畫面上，但會發現全部的圖示都是疊在一起的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
const clock = document.querySelector(".clock");
const clockM = document.querySelector(".clock-m");
//clock face
for (let i = 1; i <= 12; i++) {
  let clockHour = "";
  let clockMin = "";

  clockHour += `<div class="hour-wrap">
  <span class="hour-24">${i + 12}</span>
  <span class="line"></span>
  <span class="hour-12">${i}</span>
</div>`;
  clockMin += `<div class="minute-wrap">
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  </div>`;

  clock.innerHTML += clockHour;
  clockM.innerHTML += clockMin;
}

但是結果會全部疊在一起

這裡的作法是用 nth-child(n) 選取器改變重疊圖示的傾斜角度，也是分成 2 個部分，第一個是小時區間＋分鐘區間，總共有 2 層，但這 2 層都分成 12 等分，一個圓 360 度，每一個小時要增加 30 度。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.hour-wrap {
  .line {
    display: block;
    width: 1px;
    height: 14px;
    background: $orange-color;
    margin: 8px auto;
  }

  &:nth-child(1) {
    transform: rotate(30deg);
  }

  &:nth-child(2) {
    transform: rotate(60deg);
  }

  &:nth-child(3) {
    transform: rotate(90deg);
  }
}

接下來是鐘面的最後一個步驟，也就是做出設計稿上每小時中間的白色點點。因為每一個小時是 30 度，因此每一個點都要多加 5 度。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
.clock-m {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 350px;
  height: 350px;

  .minute-wrap {
    position: absolute;
    top: 30px;
    left: 50%;
    width: 14px;
    height: 58px;
    margin-left: -7px;
    transform-origin: 55% 255%;

    &:nth-child(1) {
      transform: rotate(30deg);
    }

    &:nth-child(2) {
      transform: rotate(60deg);
    }

    &:nth-child(3) {
      transform: rotate(90deg);
    }

    &:nth-child(4) {
      transform: rotate(120deg);
    }

    &:nth-child(5) {
      transform: rotate(150deg);
    }

    &:nth-child(6) {
      transform: rotate(180deg);
    }

    &:nth-child(7) {
      transform: rotate(210deg);
    }

    &:nth-child(8) {
      transform: rotate(240deg);
    }

    &:nth-child(9) {
      transform: rotate(270deg);
    }

    &:nth-child(10) {
      transform: rotate(300deg);
    }

    &:nth-child(11) {
      transform: rotate(330deg);
    }

    &:nth-child(12) {
      transform: rotate(360deg);
    }

    .dot {
      position: absolute;
      top: 27px;
      left: 50%;
      width: 14px;
      height: 58px;
      margin-left: -7px;
      color: white;
      transform-origin: 55% 255%;

      &:after {
        content: "";
        display: block;
        width: 2px;
        height: 2px;
        background-color: white;
        margin: 0 auto;
      }

      &:nth-child(1) {
        transform: rotate(5deg);
      }

      &:nth-child(2) {
        transform: rotate(10deg);

        &:before {
          position: absolute;
          content: "";
          display: block;
          width: 5px;
          height: 5px;
          background-color: $orange-color;
          right: -2px;
          top: -10px;
        }
      }

      &:nth-child(3) {
        transform: rotate(15deg);
      }

      &:nth-child(4) {
        transform: rotate(20deg);
      }
    }
  }
}

現在鐘面已經完成了，最後的步驟就是把指針放上，並取得時間。我們先把指針以頂端的 24-12 為基準點對準中心，　transform-origin: center bottom。它的轉動的方式，依照 css 的 transform來修改。

1
2
3
4
5
6
7
8
9
10
hand-sec {
    position: absolute;
    width: 1px;
    height: 126px;
    background-color: $lighter-green-color;
    display: block;
    bottom: 50%;
    left: 50%;
    transform-origin: center bottom;
    transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);

方式是每秒獲取一次時間，並依據取得時間的結果，去修改時針，分針，秒針的轉動角度，接下來要讓指針取得時間，這裡的取得時間的作法是參考 JavaScript 30 Days 的寫法，以 new Date()取得時針、分針、秒針的時間，並且用setInterval() 方式讓指針持續轉動。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
const secondHand = document.querySelector(".hand-sec");
const minsHand = document.querySelector(".hand-min");
const hourHand = document.querySelector(".hand-hour");

function setDate() {
  const now = new Date();
  const seconds = now.getSeconds();
  const secondsDegree = (seconds / 60) * 360;
  secondHand.style.transform = `rotate(${secondsDegree}deg)`;
  console.log(seconds);
  const mins = now.getMinutes();
  const minsDegree = (mins / 60) * 360;
  minsHand.style.transform = `rotate(${minsDegree}deg)`;
  const hours = now.getHours();
  const hoursDegree = (hours / 12) * 360 + (mins / 60) * 30;
  hourHand.style.transform = `rotate(${hoursDegree}deg)`;
}

setInterval(setDate, 1000);
setDate();

Powered by Hexo and Hexo-theme-hiker

Copyright © 2013 - 2019 CYC'S BLOG All Rights Reserved.

UV : | PV :