# Vue.js 入门之一个漂亮的电子钟

**Repository Path**: yun-zhh/vuejs_clock

## Basic Information

- **Project Name**: Vue.js 入门之一个漂亮的电子钟
- **Description**: 一个 Vue.js 的 电子钟
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2020-04-03
- **Last Updated**: 2021-11-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue.js 入门 - 漂亮的电子钟

Demo ： [http://livon.gitee.io/vuejs_clock/demo/](http://livon.gitee.io/vuejs_clock/demo/)

源码 ： [https://gitee.com/livon/vuejs_clock](https://gitee.com/livon/vuejs_clock)

博客文章 ： [https://zhuanlan.zhihu.com/p/124189344](https://zhuanlan.zhihu.com/p/124189344)

视频：[Youtube](https://www.youtube.com/watch?v=gZ5wnzpo-PI) 、[Bilibili](https://www.bilibili.com/video/BV1NT4y157YV?p=1)

![Vue.js 入门之游戏开发](img/最后效果图.png)

## 介绍

我想很多人都有一个制作电子钟的想法，我也是其中一员 。。。

经过两天时间，我的电子钟做出来了，看着做完的成果，还是挺高兴的 😃

## 软件架构

1.  Vue.js 2.6.11
2.  Jquery 3.4.1
3.  Bootstrap 4.4.1

## 第 1 步：准备工作

1.  准备一个 Bootstrap 页面，加入 Vue.js 基础代码，显示一个中心点。

js：

```js
var app = new Vue({
  el: '#app',
  data: {
    // 表盘
    clock: {
      w: $('#clock')[0].offsetWidth, // 宽：自适应
      h: $('#clock')[0].offsetHeight // 高：获取
    },
    // 表盘中心
    center: {
      x: 0,
      y: 0,
      w: 12,
      h: 12,
      r: 6
    }
  },
  mounted: function() {
    // 中心点
    this.center.x = this.clock.w / 2
    this.center.y = this.clock.h / 2
  }
})
```

css:

```css
/* 表盘 */
#clock {
  background: #091924;
  height: 641px;
}

/* 中心点 */
#center {
  position: absolute;
  background: white;
  border: 3px solid #fab350;
}
```

html

```html
<!-- 钟 -->
<div id="clock">
  <!-- 表盘中心 -->
  <span
    id="center"
    :style="{
                      width: center.w + 'px', 
                      height: center.h + 'px', 
                      left: center.x - center.w / 2 + 'px',
                      top: center.y - center.h / 2 + 'px', 
                      'border-radius': center.r + 'px'}"
  ></span>
</div>
```

完成的时候是这样子的：

![Vue.js 入门之游戏开发](img/01-显示中心点.png)

## 第 2 步：显示刻度

css ：

```css
/* 刻度线 */
.anchor_line {
  position: absolute;
  width: 18px;
  height: 2px;
  transform-origin: 0px 1px;
  background: #72777e;
}

/* 数字 - 分 */
.minute-num {
  text-align: center;
  font-size: 20px;
  position: absolute;
  color: #72777e;
  width: 30px;
  height: 30px;
}

/* 数字 - 时 */
.hour-num {
  text-align: center;
  font-weight: bold;
  font-size: 72px;
  position: absolute;
  color: #72777e;
  width: 100px;
  height: 30px;
}
```

在呈现 html 代码之前，我们先说明一下表盘中，刻度数字的位置相关的数学内容。

![Vue.js 入门之游戏开发](img/02-坐标点是多少.png)

图中，4 点钟的 x 坐标是 cos(30*PI/180)*半径，所以，js 的代码应该是：

```js
// m - 分钟
// 186 - 半径
Math.cos((m * 6 * Math.PI) / 180 - Math.PI / 2) * 186
```

同理，y 坐标是 sin(30\*PI/180)：

```js
Math.sin((m * 6 * Math.PI) / 180 - Math.PI / 2) * 186
```

html :

```html
<span class="anchor" v-for=" m in 60">
  <!-- 刻度 -->
  <span
    class="anchor_line"
    v-if="m%5 != 0"
    :style="{
                        left: center.x + 'px', 
                        top: center.y - 1 +'px', 
                        transform: 'rotate(' + m*6 + 'deg) translate(240px)',
                      }"
  ></span>

  <!-- 数字 - 分钟 -->
  <span
    class="minute-num"
    v-if="m%5 === 0"
    :style="{
                        left: center.x -16 + 'px', 
                        top: center.y - 14 +'px', 
                        transform: 'translate(' + Math.cos(m*6*Math.PI/180-Math.PI/2)*248 +'px, ' + Math.sin(m*6*Math.PI/180-Math.PI/2)*248 +'px)',
                      }"
    >{{m}}</span
  >

  <!-- 数字 - 小时 -->
  <span
    class="hour-num"
    v-if="m%5 === 0"
    :style="{
                        left: center.x + ( center.w / 2 - 50 ) + 'px', 
                        top: center.y + ( center.h / 2 - 60 ) +'px', 
                        transform: 'translate(' + Math.cos(m*6*Math.PI/180-Math.PI/2)*186 +'px, ' + Math.sin(m*6*Math.PI/180-Math.PI/2)*186 +'px)',
                      }"
    >{{m/5}}</span
  >
</span>
```

完成的时候是这样子的：

![Vue.js 入门之游戏开发](img/02-表盘刻度.png)

## 第 3 步：显示指针

vuejs 的 data 中，定义指针的角度：

```js
    date: {
      hour_rotate: 0, // 时针角度
      minute_rotate: 0, // 分针角度
      second_rotate: 0 // 秒针角度
    }
```

在 methods 中，定义获取当前时间的函数：

```js
    current_time() {
      let myDate = new Date()
      let t = {}

      t.h = myDate.getHours() //获取当前小时数(0-23)
      t.m = myDate.getMinutes() //获取当前分钟数(0-59)
      t.s = myDate.getSeconds() //获取当前秒数(0-59)
      t.ms = myDate.getMilliseconds() //获取当前毫秒数(0-999)

      this.date.hour_rotate = (t.h + t.m / 60 + t.s / 3600) * 30 - 90 // 一小时 30 度
      this.date.minute_rotate = (t.m + t.s / 60) * 6 - 90 // 一分钟 6
      this.date.second_rotate = (t.s + t.ms / 1000) * 6 - 90 // 一秒钟 6 度
    }
```

在 mounted（启动时执行）中，添加定时器：

```js
// 每 0.1 秒
this.timer1 = setInterval(this.current_time, 100)
```

css:

```css
/* 时针 */
#hour-hand {
  transform-origin: 0px 3px;
  position: absolute;
  background: #ff135e;
  width: 100px;
  height: 8px;
  border-radius: 5px;
}

/* 分针 */
#minute-hand {
  transform-origin: 0px 3px;
  position: absolute;
  background: #ffffff;
  width: 200px;
  height: 6px;
  border-radius: 3px;
}

/* 秒针 */
#second-hand {
  transform-origin: 0px 1px;
  position: absolute;
  background-color: hsl(120, 100%, 65%);
  width: 280px;
  height: 2px;
  box-shadow: 0 0 3rem 9px hsla(120, 95%, 62%, 0.61);
}
```

html:

```html
<!-- 分针 -->
<span
  id="minute-hand"
  :style="{
    left: center.x + 'px', 
    top: center.y + 'px', 
    transform: 'rotate('+ date.minute_rotate +'deg) translate(24px)'}"
></span>

<!-- 时针 - 在分针之上-->
<span
  id="hour-hand"
  :style="{
  left: center.x + 'px', 
  top: center.y + 'px', 
  transform: 'rotate('+ date.hour_rotate +'deg) translate(24px)'}"
></span>

<!-- 秒针 - 在时针之上 -->
<span
  id="second-hand"
  :style="{
  left: center.x + 'px', 
  top: center.y +'px', 
  transform: 'rotate('+ date.second_rotate +'deg) translate(-36px)'}"
></span>
```

完成的时候是这样子的：

![Vue.js 入门之游戏开发](img/03-显示指针.png)

## 第 4 步：显示日期

在 js 文件中加入：date_week 属性：

js:

```js
date: {
  hour_rotate: 0, // 时针角度
  minute_rotate: 0, // 分针角度
  second_rotate: 0, // 秒针角度
  date_week: ''
}
```

在 current_time 函数中计算 date_week：

```js
// 日期、星期
this.date.date_week = t.y + ' 年 ' + t.mn + '月' + t.d + '日 [ ' + t.w + ' ]'
```

css:

```css
/* 日期、星期 */
#date_week {
  text-align: center;
  width: 100%;
  height: 30px;
  font-size: 16px;
  font-weight: bold;
  position: absolute;
  color: #72777e;
}
```

html:

```html
<!-- 日期、星期 -->
<span id="date_week" :style="{top: center.y + 80 + 'px'}">
  {{ date.date_week }}</span
>
```

最后完成时就是这个样子的：

![Vue.js 入门之游戏开发](img/04-完成.png)

最后，春天来啦，别忘记安排时间去欣赏一下春色 。。。

![Vue.js 入门之游戏开发](img/二月春归风雨天.jpg)