摘要：前言最近閑著沒事就翻翻文章看突然想到以前寫過的一些其中有一個(gè)是時(shí)鐘不過當(dāng)時(shí)是用寫的現(xiàn)在也在玩了所以就想著用重寫一下預(yù)覽先看效果圖吧沒有動(dòng)態(tài)圖片代碼然后是就是代碼部分了模版文件時(shí)鐘組件樣式文件

最近閑著沒事, 就翻翻文章看, 突然想到以前寫過的一些demo, 其中有一個(gè)是iPhone時(shí)鐘. 不過當(dāng)時(shí)是用jquery寫的, 現(xiàn)在也在玩vue了, 所以就想著用vue重寫一下.

先看效果圖吧 (沒有動(dòng)態(tài)圖片 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%);
  }
}

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

然后來(lái)說說邏輯部分的代碼.

    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就是這個(gè)時(shí)鐘的尺寸了, 先定義半徑radius. arr就是12個(gè)刻度的數(shù)組.
這里計(jì)算各個(gè)刻度坐標(biāo)使用的方法是圓的參數(shù)方程,left和top就相當(dāng)于坐標(biāo)軸上的x和y.
radian部分需要減去90度, 因?yàn)?度剛好是3點(diǎn)鐘, 需要往回走到12點(diǎn)鐘.
然后是top, left最后要加this.size * 0.45, 因?yàn)榘咨膱A盤的尺寸在樣式里面定義的是總大小的90%.

this.time既是當(dāng)前的時(shí)間

時(shí)針
計(jì)算當(dāng)前的小時(shí)后, %12轉(zhuǎn)成12小時(shí)制, 每一小時(shí)的角度是30度; 當(dāng)前的分鐘, 每一分鐘的角度是6度.然后把總的旋轉(zhuǎn)角度加起來(lái). 秒針因?yàn)槎葦?shù)太小, 就沒有算進(jìn)去.

分鐘和秒針同理. 還有記得減去180度, 這里是因?yàn)橐婚_始定義的樣式的問題(0度指向6點(diǎn)鐘).

計(jì)時(shí)器也是簡(jiǎn)單的每秒鐘執(zhí)行一個(gè)回調(diào)而已, 要記得組件卸載時(shí)關(guān)閉計(jì)時(shí)功能.

以上