倒计时动态翻牌器秒杀、时钟都可以用

更新记录

1.0.1（2025-04-02）下载此版本

1.0.1 更新了宽高控制卡片样式，更新了卡片文字大小控制，更新了几种示例分格

1.0.0（2025-03-26）下载此版本

css加JS实现了基本的翻牌器

平台兼容性

Vue2	Vue3
×	√

App	快应用	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序
×	×	√	×	×	×	×

钉钉小程序	快手小程序	飞书小程序	京东小程序	鸿蒙元服务
×	×	×	×	×

H5-Safari	Android Browser	微信浏览器(Android)	QQ浏览器(Android)	Chrome	IE	Edge	Firefox	PC-Safari
×	×	×	×	√	×	×	√	√

需要传的参数

变量名	值	描述
fatherBorderShadowColor	'#fff'	父元素的边框阴影颜色
cardTopBg	'linear-gradient(180deg, #000 0%, #2A272B 100%)'	卡片顶部的背景渐变颜色
cardButtonBg	'#000'	卡片按钮的背景颜色
changeCardAnmintColor	'rgba(255, 255, 255, 0.3)'	卡片动画变化的颜色
duration	600	动画的持续时间（毫秒）
cardTextColor	'#fff'	卡片文字的颜色
width	Number 默认px	卡片宽度
height	Number 默认px	卡片高度
fontSize	Number	Stirng 默认px	文字大小

1.0.1 更新了宽高控制卡片样式，更新了卡片文字大小控制，更新了几种示例分格

截图中的示例

<template>
    <div>
        <div v-if="timeEnd">已到截止时间！</div>
        <div v-if="!timeEnd">
            <div class="fw-600 text-14px color-#303136 pl-10px">
                截止时间：</div>
            <div class="flex items-center">

                <div class="ml-10px flex items-center">
                    <div class="flex" v-if="timeArray.days?.length && timeArray.days?.length > 0">
                        <div v-for="(item, i) in timeArray.days.length" :key="i">
                            <flynn-CardReturner :nowTimeStr="Number(timeArray.oldDays[i])"
                                :nextTimeStr="Number(timeArray.days[i])" v-bind='cardStyle' />
                        </div>
                    </div>
                    <div class="fw-600 text-14px color-#303136 pl-10px">天</div>
                </div>
                <div class="ml-10px flex items-center">
                    <div class="flex" v-if="timeArray.hours?.length && timeArray.hours?.length > 0">
                        <div v-for="(item, i) in timeArray.hours.length" :key="i">
                            <flynn-CardReturner :nowTimeStr="Number(timeArray.oldHours[i])"
                                :nextTimeStr="Number(timeArray.hours[i])" />
                        </div>
                    </div>
                    <div class="fw-600 text-14px color-#303136 pl-10px">时</div>
                </div>
                <div class="ml-10px flex items-center">
                    <div class="flex" v-if="timeArray.minutes?.length && timeArray.minutes?.length > 0">
                        <div v-for="(item, i) in timeArray.minutes.length" :key="i">
                            <flynn-CardReturner :nowTimeStr="Number(timeArray.oldMinutes[i])"
                                :nextTimeStr="Number(timeArray.minutes[i])" />
                        </div>
                    </div>
                    <div class="fw-600 text-14px color-#303136 pl-10px">分</div>
                </div>
                <div class="ml-10px flex items-center">
                    <div class="flex" v-if="timeArray.seconds?.length && timeArray.seconds?.length > 0">
                        <div v-for="(item, i) in timeArray.seconds.length" :key="i">
                            <flynn-CardReturner :nowTimeStr="Number(timeArray.oldSeconds[i])"
                                :nextTimeStr="Number(timeArray.seconds[i])" />
                        </div>
                    </div>
                    <div class="fw-600 text-14px color-#303136 pl-10px">秒</div>
                </div>
            </div>
        </div>

        <div v-if="!timeEnd">
            <div class="fw-600 text-14px color-#303136 pl-10px">
                截止时间：</div>
            <div class="flex items-center">

                <div class="ml-10px flex items-center">
                    <div class="flex" v-if="timeArray.days?.length && timeArray.days?.length > 0">
                        <div v-for="(item, i) in timeArray.days.length" :key="i">
                            <flynn-CardReturner :nowTimeStr="Number(timeArray.oldDays[i])"
                                :nextTimeStr="Number(timeArray.days[i])" v-bind='cardStyle2' />
                        </div>
                    </div>
                    <div class="fw-600 text-14px color-#303136 pl-10px">天</div>
                </div>
                <div class="ml-10px flex items-center">
                    <div class="flex" v-if="timeArray.hours?.length && timeArray.hours?.length > 0">
                        <div v-for="(item, i) in timeArray.hours.length" :key="i">
                            <flynn-CardReturner :nowTimeStr="Number(timeArray.oldHours[i])"
                                :nextTimeStr="Number(timeArray.hours[i])" v-bind='cardStyle2'  />
                        </div>
                    </div>
                    <div class="fw-600 text-14px color-#303136 pl-10px">时</div>
                </div>
                <div class="ml-10px flex items-center">
                    <div class="flex" v-if="timeArray.minutes?.length && timeArray.minutes?.length > 0">
                        <div v-for="(item, i) in timeArray.minutes.length" :key="i">
                            <flynn-CardReturner :nowTimeStr="Number(timeArray.oldMinutes[i])"
                                :nextTimeStr="Number(timeArray.minutes[i])" v-bind='cardStyle2'  />
                        </div>
                    </div>
                    <div class="fw-600 text-14px color-#303136 pl-10px">分</div>
                </div>
                <div class="ml-10px flex items-center">
                    <div class="flex" v-if="timeArray.seconds?.length && timeArray.seconds?.length > 0">
                        <div v-for="(item, i) in timeArray.seconds.length" :key="i">
                            <flynn-CardReturner :nowTimeStr="Number(timeArray.oldSeconds[i])"
                                :nextTimeStr="Number(timeArray.seconds[i])" v-bind='cardStyle2'  />
                        </div>
                    </div>
                    <div class="fw-600 text-14px color-#303136 pl-10px">秒</div>
                </div>
            </div>
        </div>

    </div>
</template>

<script setup>
    import dayjs from 'dayjs';
    import {
        ref,
        defineProps,
        watch,
        onMounted
    } from 'vue'

    const cardStyle = ref({
        // 父级别卡片背景
        fatherBorderShadowColor: '#d6dae6',
        // 上面小卡片背景颜色
        cardTopBg: 'linear-gradient(180deg, #f8faff 0%, #e2e8f1 100%)',
        // 下面小卡片背景颜色
        cardButtonBg: '#fff',
        // 动画小卡片背景颜色
        changeCardAnmintColor: 'rgba(255, 255, 255, 0.3)',
        // 翻牌动画时间
        duration: 600,
    })
    const cardStyle2 = ref({
        // 父级别卡片背景
        fatherBorderShadowColor: '#fff',
        // 上面小卡片背景颜色
        cardTopBg: 'linear-gradient(180deg, #000 0%, #2A272B 100%)',
        // 下面小卡片背景颜色
        cardButtonBg: '#000',
        // 动画小卡片背景颜色
        changeCardAnmintColor: 'rgba(255, 255, 255, 0.3)',
        // 翻牌动画时间
        duration: 600,
        // 卡片文字颜色
        cardTextColor:'#fff'
    })

    const beforeTime = ref('2026-1-04 15:12:10');

    const initMys = (dateStr) => {
        // 获取当前时间
        const now = dayjs().valueOf();
        // 将传入的字符串转换为dayjs对象
        const target = dayjs(dateStr).valueOf();
        const oldDiff = target - now;
        const diff = target - now - 1000;
        const oldDays = Math.floor(oldDiff / (1000 * 60 * 60 * 24));
        const days = Math.floor(diff / (1000 * 60 * 60 * 24));
        const oldHours = Math.floor(
            (oldDiff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
        );
        const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        const oldMinutes = Math.floor((oldDiff % (1000 * 60 * 60)) / (1000 * 60));
        const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
        const oldSeconds = Math.floor((oldDiff % (1000 * 60)) / 1000);
        const seconds = Math.floor((diff % (1000 * 60)) / 1000);
        return {
            oldDays: pasdValue(oldDays),
            days: pasdValue(days),
            oldHours: pasdValue(oldHours),
            hours: pasdValue(hours),
            oldMinutes: pasdValue(oldMinutes),
            minutes: pasdValue(minutes),
            oldSeconds: pasdValue(oldSeconds),
            seconds: pasdValue(seconds),
        };
    };
    const pasdValue = (values) => {
        if (values <= 0) {
            return ['0', '0'];
        }
        if (values <= 9) {
            return ('0' + values).split('');
        }
        if (values > 9) {
            return String(values).split('');
        }
    };

    const timeArray = ref({
        oldDays: ['0', '0'],
        days: ['0', '0'],
        oldHours: ['0', '0'],
        hours: ['0', '0'],
        oldMinutes: ['0', '0'],
        minutes: ['0', '0'],
        oldSeconds: ['0', '0'],
        seconds: ['0', '0'],
    });
    const timeEnd = ref(false);
    const timer = ref(null);
    const timerToInit = () => {
        timer.value = setInterval(() => {
            timeArray.value = initMys(beforeTime.value);
            if (timeArray.value.days[0] == '0' && timeArray.value.days[1] == '0') {
                if (timeArray.value.hours[0] == '0' && timeArray.value.hours[1] == '0') {
                    if (
                        timeArray.value.minutes[0] == '0' &&
                        timeArray.value.minutes[1] == '0'
                    ) {
                        if (
                            timeArray.value.seconds[0] == '0' &&
                            timeArray.value.seconds[1] == '0'
                        ) {
                            timeEnd.value = true;
                            clearInterval(timer.value);
                        }
                    }
                }
            }
        }, 1000);
    };

    onMounted(() => {
        timerToInit();
    });
</script>

<style scoped>
    .flex {
        display: flex;
    }

    .items-center {
        align-items: center;
    }

    .fw-600 {
        font-weight: 600;
    }

    .color-#303136 {
        color: #303136;
    }

    .pl-10px {
        padding-left: 10px;
    }

    .ml-10px {
        margin-left: 10px;
    }

    .text-14px {
        font-size: 14px;
    }
</style>

倒计时动态翻牌器秒杀、时钟都可以用倒计时 翻牌器

更新记录

1.0.1（2025-04-02）下载此版本

1.0.0（2025-03-26）下载此版本

平台兼容性

隐私、权限声明

1. 本插件需要申请的系统权限列表：

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

许可协议

MIT协议

基于Dify平台对接的AI机器人聊天makedown流式接收

倒计时动态翻牌器秒杀、时钟都可以用

倒计时动态翻牌器秒杀、时钟都可以用 倒计时 翻牌器

更新记录

1.0.1（2025-04-02） 下载此版本

1.0.0（2025-03-26） 下载此版本

平台兼容性

隐私、权限声明

1. 本插件需要申请的系统权限列表：

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

许可协议

MIT协议

基于Dify平台对接的AI机器人聊天makedown流式接收

倒计时动态翻牌器秒杀、时钟都可以用

Modal title

倒计时动态翻牌器秒杀、时钟都可以用倒计时翻牌器

1.0.1（2025-04-02）下载此版本

1.0.0（2025-03-26）下载此版本