干货满满!如何优雅简洁地实现时钟翻牌器(支持JS，Vue，React)，可以去网吧自学办公软件吗

时钟翻牌器（Flip-Clock）是一种非常流行的时钟效果，也是开发者们热衷于实现的一种效果。它可以显示时间，并以翻牌的形式显示数字。在这篇文章中，我们将学习如何使用JavaScript、Vue和React实现时钟翻牌器效果。

## 实现原理

时钟翻牌器的实现原理其实很简单。每个数字都由多个小方块组成，这些小方块可以向上或向下旋转。通过控制这些小方块的旋转，我们可以实现数字的变化效果。

## 使用JavaScript实现时钟翻牌器

下面我们通过代码来实现一个JavaScript版本的时钟翻牌器。我们需要用到HTML、CSS和JavaScript。

### HTML代码

HTML代码非常简单，只需要一个div元素，用于显示时钟翻牌器效果。

```

```

### CSS代码

CSS代码定义了时钟翻牌器数字的样式。我们使用CSS3中的rotateX()方法来实现向上或向下旋转的效果。

```

.flip-clock-wrapper {

display: inline-block;

position: relative;

height: 60px;

line-height: 60px;

}

.flip-clock {

display: inline-block;

width: 30px;

height: 60px;

margin-right: 10px;

box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1);

}

.flip-clock .flip-clock-inner {

display: inline-block;

width: 100%;

height: 100%;

}

.flip-clock .flip-clock-front, .flip-clock .flip-clock-back {

position: absolute;

display: block;

width: 100%;

height: 50%;

overflow: hidden;

transition: all 0.3s ease-in-out;

}

.flip-clock .flip-clock-front {

z-index: 1;

transform: rotateX(0deg);

}

.flip-clock .flip-clock-back {

transform: rotateX(90deg);

}

.flip-clock .flip-clock-back .flip-clock-inner {

transform: rotateX(-180deg);

}

.flip-clock .flip-clock-back .flip-clock-top {

transform: translateY(-100%);

}

.flip-clock .flip-clock-back .flip-clock-bottom {

transform: translateY(0);

}

.flip-clock .flip-clock-top, .flip-clock .flip-clock-bottom {

position: absolute;

display: block;

width: 100%;

height: 50%;

background-color: #fff;

line-height: 30px;

text-align: center;

transform: translateZ(10px);

}

.flip-clock .flip-clock-top {

top: 0;

}

.flip-clock .flip-clock-bottom {

bottom: 0;

}

```

### JavaScript代码

JavaScript代码中，我们定义了一个名为FlipClock的类，该类中包含了时钟翻牌器的全部逻辑。

```

class FlipClock {

constructor(elem) {

this.elem = elem;

this.digits = Array.from(String(new Date().getHours()).padStart(2, '0') + String(new Date().getMinutes()).padStart(2, '0') + String(new Date().getSeconds()).padStart(2, '0'));

this.createDOM();

this.animate();

}

createDOM() {

const wrapper = document.createElement('div');

wrapper.classList.add('flip-clock-wrapper');

this.elem.appendChild(wrapper);

this.digits.forEach((digit, index) => {

const digitElem = document.createElement('div');

digitElem.classList.add('flip-clock');

digitElem.dataset.digit = digit;

const front = document.createElement('div');

front.classList.add('flip-clock-front');

front.innerHTML = digit;

const back = document.createElement('div');

back.classList.add('flip-clock-back');

back.innerHTML = digit === '9' ? 0 : +digit + 1;

const top = document.createElement('div');

top.classList.add('flip-clock-top');

top.innerHTML = digit === '9' ? 0 : +digit + 1;

const bottom = document.createElement('div');

bottom.classList.add('flip-clock-bottom');

bottom.innerHTML = digit;

back.appendChild(top);

back.appendChild(bottom);

digitElem.appendChild(front);

digitElem.appendChild(back);

wrapper.appendChild(digitElem);

});

}

animate() {

const seconds = Array.from(String(new Date().getSeconds()).padStart(2, '0'));

const minutes = Array.from(String(new Date().getMinutes()).padStart(2, '0'));

const hours = Array.from(String(new Date().getHours()).padStart(2, '0'));

const animateDigit = (digit, index) => {

const clock = this.elem.querySelectorAll('.flip-clock')[index];

if (digit !== clock.dataset.digit) {

const front = clock.querySelector('.flip-clock-front');

const back = clock.querySelector('.flip-clock-back');

const top = back.querySelector('.flip-clock-top');

const bottom = back.querySelector('.flip-clock-bottom');

front.innerHTML = back.innerHTML;

top.innerHTML = digit === '9' ? 0 : +digit + 1;

bottom.innerHTML = digit;

front.style.transform = 'rotateX(90deg)';

back.style.transform = 'rotateX(0deg)';

top.style.transform = 'translateY(-100%) rotateX(-180deg)';

bottom.style.transform = 'translateY(0) rotateX(0deg)';

clock.dataset.digit = digit;

setTimeout(() => {

front.style.transform = 'rotateX(0deg)';

back.style.transform = 'rotateX(-90deg)';

top.style.transform = 'translateY(-100%) rotateX(0deg)';

bottom.style.transform = 'translateY(0) rotateX(180deg)';

}, 250);

}

};

this.digits.forEach((digit, index) => {

if (digit !== hours[index]) {

animateDigit(hours[index], index);

animateDigit(minutes[index], index + 2);

animateDigit(seconds[index], index + 4);

}

});

setTimeout(() => {

this.animate();

}, 1000);

}

}

new FlipClock(document.getElementById('flip-clock'));

```

我们通过JavaScript获取当前时间，并将时间格式化为字符串。然后，我们调用createDOM()方法来创建DOM元素，并使用animate()方法来控制时钟翻牌器的动画效果。在animate()方法中，我们使用setTimeout()函数来定期调用animate()方法，以便实现“秒针”动态效果。

## 使用Vue实现时钟翻牌器

下面我们通过代码来实现一个Vue版本的时钟翻牌器。我们需要用到Vue、HTML、CSS和JavaScript。

### HTML代码

HTML代码非常简单，只需要一个div元素，用于显示时钟翻牌器效果。

```

```

### CSS代码

CSS代码定义了时钟翻牌器数字的样式。我们使用CSS3中的rotateX()方法来实现向上或向下旋转的效果。与JavaScript版本的实现相同。

### JavaScript代码

JavaScript代码中，我们定义了一个名为FlipClock的Vue组件，该组件中包含了时钟翻牌器的全部逻辑。我们在计算属性中获取当前时间，并将时间格式化为字符串。然后，我们在模板中使用v-for指令来循环渲染时钟翻牌器的每一个数字。在数据绑定中，我们将数字绑定到props中。

```

Vue.component('flip-clock', {

props: ['time'],

computed: {

digits() {

return Array.from(this.time);

}

},

methods: {

animateDigit(digit, index) {

const clock = this.$refs[`clock${index}`][0];

if (digit !== clock.dataset.digit) {

const front = clock.querySelector('.flip-clock-front');

const back = clock.querySelector('.flip-clock-back');

const top = back.querySelector('.flip-clock-top');

const bottom = back.querySelector('.flip-clock-bottom');

front.innerHTML = back.innerHTML;

top.innerHTML = digit === '9' ? 0 : +digit + 1;

bottom.innerHTML = digit;

front.style.transform = 'rotateX(90deg)';

back.style.transform = 'rotateX(0deg)';

top.style.transform = 'translateY(-100%) rotateX(-180deg)';

bottom.style.transform = 'translateY(0) rotateX(0deg)';

clock.dataset.digit = digit;

setTimeout(() => {

front.style.transform = 'rotateX(0deg)';

back.style.transform = 'rotateX(-90deg)';

top.style.transform = 'translateY(-100%) rotateX(0deg)';

bottom.style.transform = 'translateY(0) rotateX(180deg)';

}, 250);

}

}

},

template: `

`,

mounted() {

setInterval(() => {

const seconds = Array.from(String(new Date().getSeconds()).padStart(2, '0'));

const minutes = Array.from(String(new Date().getMinutes()).padStart(2, '0'));

const hours = Array.from(String(new Date().getHours()).padStart(2, '0'));

this.digits.forEach((digit, index) => {

if (digit !== hours[index]) {

this.animateDigit(hours[index], index);

this.animateDigit(minutes[index], index + 2);

this.animateDigit(seconds[index], index + 4);

}

});

}, 1000);

}

});

new Vue({

el: '#app',

data() {

return {

time: ''

};

},

mounted() {

setInterval(() => {

const date = new Date();

this.time = String(date.getHours()).padStart(2, '0') + String(date.getMinutes()).padStart(2, '0') + String(date.getSeconds()).padStart(2, '0');

}, 1000);

}

});

```

我们通过Vue.component()方法来创建FlipClock组件。props中定义了time属性，并在计算属性中定义了digits属性。我们在模板中使用v-for指令来循环渲染时钟翻牌器的每一个数字，并将数字绑定到props中。在mounted()钩子函数中，我们使用setInterval()方法来定期更新时间，并调用animateDigit()方法来实现时钟翻牌器的动画效果。

## 使用React实现时钟翻牌器

下面我们通过代码来实现一个React版本的时钟翻牌器。我们需要用到React、HTML、CSS和JavaScript。

### HTML代码

HTML代码非常简单，只需要一个div元素，用于显示时钟翻牌器效果。

```

```

### CSS代码

CSS代码定义了时钟翻牌器数字的样式。我们使用CSS3中的rotateX()方法来实现向上或向下旋转的效果。与JavaScript和Vue版本的实现相同。

### JavaScript代码

JavaScript代码中，我们定义了一个名为FlipClock的React组件，该组件中包含了时钟翻牌器的全部逻辑。我们在构造函数中定义了时间，并将时间格式化为字符串。在render()方法中，我们使用map()方法来循环渲染时钟翻牌器的每一个数字，并将数字绑定到props中。在componentDidMount()方法中，我们使用setInterval()方法来定期更新时间，并调用animateDigit()方法来实现时钟翻牌器的动画效果。

```

class FlipClock extends React.Component {

constructor(props) {

super(props);

this.state = { time: '' };

}

animateDigit(digit, index) {

const clock = document.querySelectorAll('.flip-clock')[index];

if (digit !== clock.dataset.digit) {

const front = clock.querySelector('.flip-clock-front');

const back = clock.querySelector('.flip-clock-back');

const top = back.querySelector('.flip-clock-top');

const bottom = back.querySelector('.flip-clock-bottom');

front.innerHTML = back.innerHTML;

top.innerHTML = digit === '9' ? 0 : +digit + 1;

bottom.innerHTML = digit;

front.style.transform = 'rotateX(90deg)';

back.style.transform = 'rotateX(0deg)';

top.style.transform = 'translateY(-100%) rotateX(-180deg)';

bottom.style.transform = 'translateY(0) rotateX(0deg)';

clock.dataset.digit = digit;

setTimeout(() => {

front.style.transform = 'rotateX(0deg)';

back.style.transform = 'rotateX(-90deg)';

top.style.transform = 'translateY(-100%) rotateX(0deg)';

bottom.style.transform = 'translateY(0) rotateX(180deg)';

}, 250);

}

}

componentDidMount() {

setInterval(() => {

const seconds = Array.from(String(new Date().getSeconds()).padStart(2, '0'));

const minutes = Array.from(String(new Date().getMinutes()).padStart(2, '0'));

const hours = Array.from(String(new Date().getHours()).padStart(2, '0'));

hours.concat(minutes, seconds).forEach((digit, index) => {

if (digit !== this.state.time[index]) {

this.animateDigit(digit, index);

}

});

this.setState({ time: String(new Date().getHours()).padStart(2, '0') + String(new Date().getMinutes()).padStart(2, '0') + String(new Date().getSeconds()).padStart(2, '0') });

}, 1000);

}

render() {

return (

);

}

}

ReactDOM.render(

,

document.getElementById('root')

);

```

我们通过React.createClass()方法来创建FlipClock组件。在构造函数中，我们定义了时间，并将时间格式化为字符串。在render()方法中，我们使用map()方法来循环渲染时钟翻牌器的每一个数字，并将数字绑定到props中。在componentDidMount()方法中，我们使用setInterval()方法来定期更新时间，并调用animateDigit()方法来实现时钟翻牌器的动画效果。然后我们使用ReactDOM.render()方法将FlipClock组件渲染到页面上。

## 结论

本文分别使用JavaScript、Vue和React来实现了时钟翻牌器效果。通过代码实现，我们详细讲解了时钟翻牌器的实现原理、HTML、CSS和JavaScript代码。了解了如何使用JavaScript、Vue和React实现时钟翻牌器，可以让开发者更好的应对项目技术的选择及开发。