当前位置：首页 > VUE

vue实现打卡天数

2026-03-26 19:09:19VUE

Vue实现打卡天数功能

数据存储设计

使用localStorage或Vuex持久化存储打卡记录，确保刷新页面后数据不丢失。推荐数据结构：

{
  lastCheckDate: '2023-11-20', // 最后打卡日期
  streakDays: 5,              // 连续打卡天数
  history: ['2023-11-16', ...] // 历史打卡记录
}

打卡逻辑实现

创建打卡处理方法，需包含日期连续性校验：

methods: {
  handleCheckIn() {
    const today = new Date().toISOString().split('T')[0];
    if (this.lastCheckDate === today) return;

    const isConsecutive = this.checkConsecutive(today);
    this.streakDays = isConsecutive ? this.streakDays + 1 : 1;
    this.lastCheckDate = today;
    this.history.push(today);
  },

  checkConsecutive(newDate) {
    const lastDate = new Date(this.lastCheckDate);
    const currDate = new Date(newDate);
    return (currDate - lastDate) === 86400000; // 1天的毫秒数
  }
}

界面组件示例

创建打卡按钮和天数显示组件：

<template>
  <div class="check-in-container">
    <button @click="handleCheckIn" :disabled="isCheckedToday">
      {{ isCheckedToday ? '今日已打卡' : '立即打卡' }}
    </button>
    <div class="streak-count">
      已连续打卡 <strong>{{ streakDays }}</strong> 天
    </div>
    <calendar-view :events="history" />
  </div>
</template>

日历可视化

集成第三方日历组件（如v-calendar）展示打卡历史：

import { Calendar } from 'v-calendar';
components: { Calendar },
data() {
  return {
    attributes: [
      {
        dates: this.history,
        highlight: true
      }
    ]
  }
}

断签处理

实现断签提醒和重置逻辑：

watch: {
  lastCheckDate: {
    handler(newVal) {
      const today = new Date();
      const lastDay = new Date(newVal);
      if ((today - lastDay) > 86400000 * 2) {
        this.showBreakWarning();
        this.streakDays = 0;
      }
    },
    immediate: true
  }
}

持久化存储

使用vuex-persistedstate插件实现状态持久化：

import createPersistedState from 'vuex-persistedstate';
export default new Vuex.Store({
  plugins: [createPersistedState({
    key: 'checkInData'
  })]
});

动画效果

添加打卡成功动效增强用户体验：

vue实现打卡天数

.check-in-success {
  animation: bounce 0.5s;
}
@keyframes bounce {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}

标签: 天数 vue

分享给朋友：

vue实现xterm

在 Vue 中集成 Xterm.js Xterm.js 是一个基于 TypeScript 的前端终端组件库，可用于在浏览器中实现终端功能。以下是在 Vue 项目中集成 Xterm.js 的详细步骤。…

vue 实现ztree

在Vue中实现类似ZTree的功能，可以通过集成第三方库或自定义组件完成。以下是两种常见方法：使用vue-tree组件 vue-tree是一个轻量级的Vue树形组件，支持复选框、懒加载等功能，适合…

vue实现画板

Vue 实现画板功能在 Vue 中实现画板功能可以通过 HTML5 的 Canvas API 实现。以下是一个完整的实现方案：创建 Vue 组件新建一个 Vue 单文件组件（SFC），命名为…

vue 实现vshow

Vue 实现 v-show 在 Vue 中，v-show 是一个常用的指令，用于根据条件控制元素的显示或隐藏。与 v-if 不同，v-show 不会移除 DOM 元素，而是通过 CSS 的 displ…

使用vue实现搜索

使用 Vue 实现搜索功能基础搜索实现在 Vue 中实现搜索功能通常涉及数据绑定、事件监听和列表过滤。以下是一个简单的实现方式： <template> <div&g…

vscode实现vue高亮

安装Vue官方扩展在VSCode扩展商店中搜索并安装Volar，这是Vue团队推荐的官方插件，提供完整的Vue 3语言支持、语法高亮、智能提示等功能。安装后无需额外配置即可生效。启用Volar的…

vue实现打卡天数