代码直接复制，新建一个文件放入即可，在引用出传入需要渲染的数据val（Number类型），即可，需要自定义颜色文字颜色可以传入,样式可以在css里修改，需要改变翻牌速度，可修改speedNumber值,需要修改翻牌,增加了区间值的输入,随机在正负20之间进行随机递增或者减少
<template>
<div>
<div :id="id" class="clock" :style="{color: fontColor}">
<!-- front: 表示位于前面的纸牌 back: 表示位于后面的纸牌 -->
<div class="flip down">
<div class="digital front number0"></div>
<div class="digital back number1"></div>
</div>
<div class="separate down"> <div class="symbol">,</div> </div>
<div class="flip down">
<div class="digital front number0"></div>
<div class="digital back number1"></div>
</div>
<div class="flip down">
<div class="digital front number0"></div>
<div class="digital back number1"></div>
</div>
<div class="flip down">
<div class="digital front number0"></div>
<div class="digital back number1"></div>
</div>
<div class="separate down"> <div class="symbol">,</div> </div>
<div class="flip down">
<div class="digital front number0"></div>
<div class="digital back number1"></div>
</div>
<div class="flip down">
<div class="digital front number0"></div>
<div class="digital back number1"></div>
</div>
<div class="flip down">
<div class="digital front number0"></div>
<div class="digital back number1"></div>
</div>
<div class="flip down">
<div class="digital front number0"></div>
<div class="digital back number1"></div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "Clock",
data() {
return {
numberceshi: 1,
speedNumber: 1000, //翻牌器市场，这里做初始值，在init方法里的aaaa可以自定义翻牌的速度和时长
};
},
props: {
//最大值
val: {
type: Number,
default: 0,
},
// 最小值
endValue: {
type: Number,
default: 0,
},
fontColor: {
type: String,
default: "#fff000",
},
id: {
type: String,
default: null,
},
},
watch: {
val: {
handler(val) {
this.init(this.val, this.randomIncrement(this.val).toString());
},
deep: true,
immediate: true,
},
},
methods: {
init(val, outvals) {
let outval = outvals;
let aaaa = this.speedNumber;
let thsh = this;
function Flipper(config) {
// 默认配置
this.config = {
// 数据模块的节点
node: null, // 初始前牌文字
frontText: "number0", // 初始后牌文字
backText: "number1", // 翻转动画时间（毫秒，与翻转动画CSS 设置的animation-duration时间要一致）
duration: 400,
}; // 节点的原本class，与html对应，方便后面添加/删除新的class
this.nodeClass = {
flip: "flip",
front: "digital front",
back: "digital back",
};
// 覆盖默认配置
Object.assign(this.config, config); // 定位前后两个牌的DOM节点
this.frontNode = this.config.node.querySelector(".front");
this.backNode = this.config.node.querySelector(".back"); // 是否处于翻牌动画过程中（防止动画未完成就进入下一次翻牌）
this.isFlipping = false; // 初始化
this._init();
}
Flipper.prototype = {
constructor: Flipper, // 初始化
_init: function () {
// 设置初始牌面字符
this._setFront(this.config.frontText);
this._setBack(this.config.backText);
}, // 设置前牌文字
_setFront: function (className) {
this.frontNode.setAttribute("class", this.nodeClass.front + " " + className);
}, // 设置后牌文字
_setBack: function (className) {
this.backNode.setAttribute("class", this.nodeClass.back + " " + className);
},
_flip: function (type, front, back) {
// 如果处于翻转中，则不执行
if (this.isFlipping) {
return false;
} // 设置翻转状态为true
this.isFlipping = true; // 设置前牌文字
// 设置前牌文字
this._setFront(front);
// 设置后牌文字
this._setBack(back);
let flipClass = this.nodeClass.flip;
if (type === "down") {
flipClass += " down";
} else {
flipClass += " up";
}
// 添加翻转方向和执行动画的class，执行翻转动画
this.config.node.setAttribute("class", flipClass + " go"); // 根据设置的动画时间，在动画结束后，还原class并更新前牌文字
setTimeout(() => {
// 还原class
this.config.node.setAttribute("class", flipClass); // 设置翻转状态为false
this.isFlipping = false; // 将前牌文字设置为当前新的数字，后牌因为被前牌挡住了，就不用设置了。
this._setFront(back);
}, aaaa); //翻牌的速度
}, // 下翻牌
flipDown: function (front, back) {
this._flip("down", front, back);
}, // 上翻牌
flipUp: function (front, back) {
this._flip("up", front, back);
},
};
// 定位数据模块
let clock = document.getElementById(this.id); // 定位6个翻板
let flips = clock.querySelectorAll(".flip"); // 获取当前值
let nowTimeStr = null;
let nextTimeStr = null;
if (val > Number(outvals)) {
nowTimeStr = padLeftZeroNumber((Number(outval) - 1).toString());
nextTimeStr = padLeftZeroNumber((Number(nowTimeStr) + 1).toString());
} else {
nowTimeStr = padLeftZeroNumber((Number(outval) + 1).toString());
nextTimeStr = padLeftZeroNumber((Number(nowTimeStr) - 1).toString());
}
let flipObjs = [];
// 决定从右往左递增
for (let i = 0; i < flips.length; i++) {
// 创建6个Flipper实例，并初始化
flipObjs.push(
new Flipper({
// 每个flipper实例按数组顺序与翻板DOM的顺序一一对应
node: flips[i], // 按数组顺序取时间字符串对应位置的数字
frontText: "number" + nowTimeStr[i],
backText: "number" + nextTimeStr[i],
}),
);
}
// 开始计时
let endout = setInterval(function () {
function executeDelayedTask() {
// 获取当前时间
let now = outval;
if (val >= Number(outvals)) {
now = outval++;
} else {
now = outval--;
}
let nowTimeStr = padLeftZeroNumber((now - 1).toString());
let nextTimeStr = padLeftZeroNumber(now.toString());
if (Number(nextTimeStr) == val) {
// 当达到最大值的时候重置数据，清除定时器，重新打开定时器，避免数据溢出
clearInterval(endout);
thsh.init(thsh.randomIncrement(Number(nextTimeStr)).toString(), Number(nextTimeStr));
}
for (let i = 0; i < flipObjs.length; i++) {
if (nowTimeStr[i] === nextTimeStr[i]) {
continue;
}
if (val > Number(outvals)) {
flipObjs[i].flipDown("number" + nowTimeStr[i], "number" + nextTimeStr[i]);
} else {
flipObjs[i].flipUp("number" + nextTimeStr[i], "number" + nowTimeStr[i]);
}
}
}
// 第一次延时
let timer = setTimeout(executeDelayedTask, this.speedNumber);
}, this.speedNumber * 2); //正则格式化日期
//数字补零
function padLeftZeroNumber(str) {
let arr = str.split("");
let lengths = 8 - arr.length;
for (let index = 0; index < lengths; index++) {
arr.unshift("0");
}
return arr.join("");
}
},
randomIncrement(value) {
// 随机生成一个-20到20的随机数
// 如果最大值小于最小值，交换它们的值
// if (max < min) {
// [min, max] = [max, min];
// }
// 随机生成一个-20到20的随机数
const randomOffset = Math.floor(Math.random() * 41) - 20;
// 计算当前值加上随机数
let newValue = value + randomOffset;
// 确保生成的值不超过最大值和最小值
// newValue = Math.max(min, Math.min(max, newValue));
// console.log(newValue, "newValue----------随机数");
// 返回随机生成的值
return newValue;
},
},
};
</script>
<style lang="less" scoped>
.flip {
display: inline-block;
position: relative;
width: 27px;
height: 38px;
line-height: 35px;
border: solid 1px #000;
border-radius: 5px;
background: transparent;
font-size: 35px;
// font-weight: 600;
text-align: center;
// margin-left: 5px;
}
.separate {
display: inline-block;
position: relative;
width: 8px;
height: 25px;
background: transparent;
font-size: 35px;
font-weight: 600;
text-align: center;
.symbol {
position: absolute;
top: -23px;
}
}
.flip .digital::before,
.flip .digital::after {
content: "";
position: absolute;
left: 0;
right: 0;
overflow: hidden;
box-sizing: border-box; /*中间添加一条水平折线*/
}
/* 上半部分 */
.flip .digital::before {
top: 0;
bottom: 50%;
background: #001135;
font-family: "digifaceWide", sans-serif;
border-radius: 3px 3px 0 0;
// border-bottom: solid 0.5px #666; /*中间添加一条水平折线*/
}
/* 下半部分 */
.flip .digital::after {
top: 50%;
bottom: 0;
background: #001135;
border-radius: 0 0 3px 3px;
font-family: "digifaceWide", sans-serif;
line-height: 0; /*下半部分对着最上方对齐*/
}
/*向下翻start*/
.flip.down .front::before {
z-index: 3; /*处于最上层*/
}
.flip.down .back::after {
z-index: 2; /*处于第二层*/
transform-origin: 50% 0%; /*折叠起来(竖起来的背面部分) 看动图*/
transform: perspective(160px) rotateX(180deg);
}
.flip.down .front::after,
.flip.down .back::before {
z-index: 1;
}
.flip.down.go .front::before {
transform-origin: 50% 100%;
animation: frontFlipDown 0.6s ease-in-out both;
box-shadow: 0 -2px 6px rgba(255, 255, 255, 0.3);
backface-visibility: hidden;
/*
backface-visibility表示元素的背面是否可见，默认为visible(可见)。
这里的需求是，当前面上半部纸片翻转到一半的时候(90度)进入不可见状态。而纸牌翻转90度以后，正好是显露元素背面的开始，所以将backface-visibility设置为hidden即可完美解决！
*/
}
.flip.down.go .back::after {
animation: backFlipDown 0.6s ease-in-out both;
}
/*向下翻end*/
/*向上翻start*/
.flip.up .front::after {
z-index: 3;
}
.flip.up .back::before {
z-index: 2;
transform-origin: 50% 100%;
transform: perspective(160px) rotateX(-180deg);
}
.flip.up .front::before,
.flip.up .back::after {
z-index: 1;
}
.flip.up.go .front::after {
transform-origin: 50% 0;
animation: frontFlipUp 0.6s ease-in-out both;
box-shadow: 0 2px 6px rgba(255, 255, 255, 0.3);
backface-visibility: hidden;
}
.flip.up.go .back::before {
animation: backFlipUp 0.6s ease-in-out both;
}
/*向上翻end*/
/* 向下翻动画 从上往下翻 */
@keyframes frontFlipDown {
0% {
transform: perspective(160px) rotateX(0deg);
}
100% {
transform: perspective(160px) rotateX(-180deg);
}
}
@keyframes backFlipDown {
0% {
transform: perspective(160px) rotateX(180deg);
}
100% {
transform: perspective(160px) rotateX(0deg);
}
}
/* 向上翻动画 */
@keyframes frontFlipUp {
0% {
transform: perspective(160px) rotateX(0deg);
}
100% {
transform: perspective(160px) rotateX(180deg);
}
}
@keyframes backFlipUp {
0% {
transform: perspective(160px) rotateX(-180deg);
}
100% {
transform: perspective(160px) rotateX(0deg);
}
}
/*填充数字*/
.flip .number-::before,
.flip .number-::after {
content: "-";
}
.flip .number0::before,
.flip .number0::after {
content: "0";
}
.flip .number1::before,
.flip .number1::after {
content: "1";
}
.flip .number2::before,
.flip .number2::after {
content: "2";
}
.flip .number3::before,
.flip .number3::after {
content: "3";
}
.flip .number4::before,
.flip .number4::after {
content: "4";
}
.flip .number5::before,
.flip .number5::after {
content: "5";
}
.flip .number6::before,
.flip .number6::after {
content: "6";
}
.flip .number7::before,
.flip .number7::after {
content: "7";
}
.flip .number8::before,
.flip .number8::after {
content: "8";
}
.flip .number9::before,
.flip .number9::after {
content: "9";
}
.clock {
text-align: center;
// margin-bottom: 200px;
}
.clock em {
display: inline-block;
line-height: 50px;
font-size: 66px;
font-style: normal;
vertical-align: top;
}
</style>
3070
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
