摘要：前言最近閑著沒事就翻翻文章看突然想到以前寫過的一些其中有一個是時鐘不過當時是用寫的現在也在玩了所以就想著用重寫一下預覽先看效果圖吧沒有動態圖片代碼然后是就是代碼部分了模版文件時鐘組件樣式文件

最近閑著沒事, 就翻翻文章看, 突然想到以前寫過的一些demo, 其中有一個是iPhone時鐘. 不過當時是用jquery寫的, 現在也在玩vue了, 所以就想著用vue重寫一下.

先看效果圖吧 (沒有動態圖片 T_T):

然后是就是代碼部分了

模版文件(.vue)

樣式文件(.scss)

.black-dail {
  width: 100%;
  height: 100%;
  padding: 5%;
  border-radius: 20%;
  background-color: #000;
  box-sizing: border-box;
}

.white-dail {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #fff;
}

.degree-scale {
  position: absolute;
  display: block;
  // font-size: 16px;
  width: 2em;
  height: 2em;
  text-align: center;
  line-height: 2;
  transform: translate(-50%, -50%);
}

.hour-hand,
.minute-hand,
.second-hand {
  position: absolute;
  top: 50%;
  left: 50%;
}

.hour-hand {
  width: 2.5%;
  height: 30%;
  background-color: #000;
  transform-origin: 50% 0;
  transform: translate(-50%, 0) rotate(0);
  &::after {
    position: absolute;
    top: 0;
    left: 50%;
    display: block;
    content: "";
    width: 200%;
    padding-top: 200%;
    border-radius: 50%;
    background-color: #000;
    transform: translate(-50%, -50%);
  }
}

.minute-hand {
  width: 2%;
  height: 40%;
  background-color: #000;
  transform-origin: 50% 0;
  transform: translate(-50%, 0) rotate(0);
}

$second-color: rgb(255, 74, 74);
.second-hand {
  width: 1%;
  height: 50%;
  background-color: $second-color;
  transform-origin: 50% 10%;
  transform: translate(-50%, -10%) rotate(0);

  &::after {
    position: absolute;
    top: 10%;
    left: 50%;
    display: block;
    content: "";
    width: 300%;
    padding-top: 300%;
    border-radius: 50%;
    background-color: $second-color;
    transform: translate(-50%, -50%);
  }
}

這個也沒啥好說的了, "黑色的底盤 + 白色圓盤 + 刻度*12 + 時針 + 分針 + 秒針".
除了刻度的位置是計算出來的之外, 其他的基本用樣式就ok了.

然后來說說邏輯部分的代碼.

    scales() {
      const radius = this.size / 2 * 0.8
      const arr = []
      for (let i = 1; i <= 12; i++) {
        const radian = 30 * Math.PI / 180 * i - 0.5 * Math.PI
        const left = radius * Math.cos(radian) + this.size * 0.45
        const top = radius * Math.sin(radian) + this.size * 0.45
        arr.push({
          num: i,
          left: `${left.toFixed(2)}px`,
          top: `${top.toFixed(2)}px`
        })
      }
      return arr
    },

this.size就是這個時鐘的尺寸了, 先定義半徑radius. arr就是12個刻度的數組.
這里計算各個刻度坐標使用的方法是圓的參數方程,left和top就相當于坐標軸上的x和y.
radian部分需要減去90度, 因為0度剛好是3點鐘, 需要往回走到12點鐘.
然后是top, left最后要加this.size * 0.45, 因為白色的圓盤的尺寸在樣式里面定義的是總大小的90%.

this.time既是當前的時間

時針
計算當前的小時后, %12轉成12小時制, 每一小時的角度是30度; 當前的分鐘, 每一分鐘的角度是6度.然后把總的旋轉角度加起來. 秒針因為度數太小, 就沒有算進去.

分鐘和秒針同理. 還有記得減去180度, 這里是因為一開始定義的樣式的問題(0度指向6點鐘).

計時器也是簡單的每秒鐘執行一個回調而已, 要記得組件卸載時關閉計時功能.

以上