在 JavaScript中，我们创建一个 FilperItem 类来管理翻牌器的逻辑。这个类负责创建卡片、初始化DOM结构、以及实现增加和减少数字的动画效果。
class FilperItem {
constructor(wrap) {
this.num = 0;
this.initDom();
wrap.appendChild(this.el);
createCard(type, num, fixed) {
const el = document.createElement('div');
el.className = 'card-item';
const innerText = num;
if (fixed) {
el.style.position = 'relative';
const clipPath = type === 'top' ? 'polygon(0 0, 100% 0%, 100% 50%, 0 50%)' : 'polygon(0 50%, 100% 50%, 100% 100%, 0% 100%)';
el.innerText = innerText;
el.style.clipPath = clipPath;
return el;
initDom() {
const el = document.createElement('div');
el.className = 'filper-item';
const top = this.createCard('top', 0, false);
const bottom = this.createCard('bottom', 0, true);
el.appendChild(top);
el.appendChild(bottom);
this.el = el;
this.top = top;
this.bottom = bottom;
increase(to = undefined) {
const { num, top, bottom, el } = this;
let txt = to ?? (num + 1) % 10;
if (txt === num) return;
const animate = {
zIndex: [1, 1],
transform: ['rotateX(0)', 'rotateX(-90deg)'],
offset: [0, 1]
const animate1 = {
zIndex: [1, 1],
transform: ['rotateX(90deg)', 'rotateX(0deg)'],
offset: [0, 1]
const animateOption = {
duration: 500
const t = this.createCard('top', num);
el.insertBefore(t, el.childNodes[1]);
const ta = t.animate(animate, animateOption);
setTimeout(() => {
top.innerText = txt;
});
ta.onfinish = () => {
el.removeChild(t);
const b = this.createCard('bottom', txt);
el.appendChild(b);
const ba = b.animate(animate1, animateOption);
ba.onfinish = () => {
bottom.innerText = txt;
el.removeChild(b);
this.num = txt;
reduce(to = undefined) {
const { num, top, bottom, el } = this;
let txt = to ?? (num + 9) % 10;
if (txt === num) return;
const animate = {
zIndex: [1, 1],
transform: ['rotateX(-90deg)', 'rotateX(0)'],
offset: [0, 1]
const animate1 = {
zIndex: [1, 1],
transform: ['rotateX(0deg)', 'rotateX(90deg)'],
offset: [0, 1]
const animateOption = {
duration: 500
const b = this.createCard('bottom', num);
if (bottom.nextElementSibling) {
el.insertBefore(b, bottom.nextElementSibling);
} else {
el.appendChild(b);
const ba = b.animate(animate1, animateOption);
setTimeout(() => {
bottom.innerText = txt;
});
ba.onfinish = () => {
el.removeChild(b);
const t = this.createCard('top', txt);
el.insertBefore(t, bottom);
const ta = t.animate(animate, animateOption);
ta.onfinish = () => {
top.innerText = txt;
el.removeChild(t);
this.num = txt;
filper(next, dir = 'increase') {
switch (dir) {
case 'increase': {
this.increase(next);
break;
case 'reduce': {
this.reduce(next);
使用方式：
const wrap = document.querySelector('#wrap');
const f = new FilperItem(wrap);
window.f = f;
window.onkeydown = (e) => {
if (e.code === 'ArrowDown') {
f.reduce();
} else if (e.code === 'ArrowUp') {
f.increase();
} else if (/^\d$/.test(e.key)) {
f.filper(Number(e.key));
通过上述步骤，我们已经在 HTML 中使用 CSS 和 JavaScript 创建了一个基础的翻牌器。
这个翻牌器可以响应键盘事件，实现数字的增加和减少。
虽然这里的实现相对简单，但它展示了如何利用现代Web技术来模拟传统翻牌器的动态效果。
随着技术的进一步发展，我们可以在此基础上添加更多功能，如动画效果的优化、多数字支持等，以创造出更加炫酷的效果。
– 欢迎点赞、关注、转发、收藏【我码玄黄】，各大平台同名。
没有具体说做什么效果，但是想着纯数字转换太简单了，然后就顺手做了一个翻牌的效果。
效果预览，新窗口打开：https://codepen.io/andy-js/pen/ExaGxaL
首先做一些页面布局：
body{background: #000;}
list-style: none;
margin:100px 0;
display: flex;
justify-content:center;
line-height: 56
<div class="flip-container" onclick="this.classList.toggle('flipped')">
<div class="flipper">
<div class="front">0</div>
<div class="back">1</div>
<div class="flip-container" onclick="this.classList.toggle('flipped')">
<div class="flipper">
<div class="front">0</div>
<div class="back">2</div>
<div class="flip-container" onclick="this.classList.toggle('flipped')">
<div class="flipper">
<div class="front">0</div>
<div class="back">3</div>
<!-- 可以添加更多的数字翻牌器 -->
</body>
</html>
这个数字翻牌器使用了 CSS 3D 变换来实现翻转效果。每个数字翻牌器都是一个 `div` 元素，包含一个 `.flipper` 元素和一个 `.front` 元素和一个 `.back` 元素。`.front` 元素显示数字 0，`.back` 元素显示要翻转到的数字。当用户点击数字翻牌器时，它会翻转并显示 `.back` 元素。
