vue 实现打卡记录代码

最新推荐文章于 2024-07-07 17:13:34 发布

Java&Develop

最新推荐文章于 2024-07-07 17:13:34 发布

阅读量208

点赞数

分类专栏： VUE 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_48616345/article/details/130374909

版权

VUE 专栏收录该内容

67 篇文章 1 订阅

订阅专栏

效果图

在这里插入图片描述

代码

<template>
  <div>
    <div class="top-title">
      <div><span @click="lastMonth" class="link">⋘</span></div>
      <div><span>{{year}}年{{month}}月</span></div>
      <div><span @click="nextMonth" class="link">⋙</span></div>
    </div>
    <div class="container" style="border-bottom: 1px solid #cccccc">
      <div v-for="(item,index) in weeks" :key="index">{{ item }}</div>
    </div>
    <div class="container" style="padding: 1vh 1vh 3vh 1vh;">
      <div v-for="(item,index) in data" :key="index">
        <div v-if="compareToNow(item) === 0" style="color: #2d8cf0" @click="todo">{{ item.date }}</div>
        <div v-if="compareToNow(item) === 1" @click="todo">{{ item.date }}</div>
        <div v-if="compareToNow(item) === -1" class="otherDay" @click="todo">
          <div>{{ item.date }}</div>
          <div class="date-desc">补卡</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      today:new Date(),
      now:new Date(),
      weeks:["日","一","二","三","四","五","六"],
      year:"",
      month:"",
      date:"",
      firstDay:"",
      data:[],
    };
  },
  mounted() {
    this.getNow();
  },
  methods:{
    getNow(){
      this.year = this.now.getFullYear();
      this.month = this.now.getMonth() + 1;
      this.date = this.now.getDate();
      this.now.setDate(1);
      this.firstDay = this.now.getDay();
      this.initData();
    },
    getMonthDay(month){
      if ([1,3,5,7,8,10,12].includes(month)) {
        return 31
      } else if ([4,6,9,11].includes(month)) {
        return 30
      } else if (month === 2) {
        //  判断当年是否为闰年
        if (
        (this.year % 4 === 0 && this.year % 100 !== 0) ||
        this.year % 400 === 0          ) {
  return 29          } else {
  return 28          }
}
},
initData(){
  this.data = [];
  let days = this.getMonthDay(this.month);
  for (let i = 0; i < this.firstDay; i++) {
    this.data.push({
      year:"",
      month:"",
      date:"",
    });
  }
  for (let i = 0; i < days; i++) {
    this.data.push(
      {
        year: this.year,
        month: this.month,
        date: i + 1,
      }
    );
  }
},
lastMonth(){
  this.now.setMonth(this.now.getMonth() - 1);
  this.getNow();
},
nextMonth(){
  this.now.setMonth(this.now.getMonth() + 1);
  this.getNow();
},
compareToNow(item){
  if (item.year && item.month && item.date) {
    let date1 = new Date();
    date1.setFullYear(item.year)
    date1.setMonth(item.month - 1)
    date1.setDate(item.date)
    date1.setHours(0)
    date1.setMinutes(0)
    date1.setSeconds(0)
    let now = new Date();
    now.setHours(0)
    now.setMinutes(0)
    now.setSeconds(0)

    if (date1.getTime() > now.getTime()){
      return 1          }else if (date1.getTime() === now.getTime()){
      return 0          }else if (date1.getTime() < now.getTime()){
      return -1          }
  }
}
}
}
</script>
<style scoped lang="less">
.top-title{
  display: grid;
  grid-template-columns:repeat(3,1fr);
  grid-auto-rows:40px;
  grid-gap:1rem;
  background-color: #FFFFFF;
  border-bottom: 1px solid #cccccc;
  line-height: 40px;
}
.container{
  display: grid;
  grid-template-columns:repeat(7,1fr);
  grid-auto-rows:40px;
  grid-gap:1rem;
  background-color: #FFFFFF;
  line-height: 40px;

  div{
    text-align: center;
  }
}
.today{
  //background: url("../assets/circle_success.png") no-repeat center center;
  //background-size: 95% 95%;
  position: relative;
}
.otherDay{
  //background: url("../assets/circle_error.png") no-repeat center center;
  //background-size: 95% 95%;
  position: relative;
}
.link{
  font-size: 14px;
  color: #2d8cf0;
}
.date-desc{
  display: block;
  position: absolute;
  top: 6.8vw;
  left: 1.5vw;
  font-size: 2.3vw;
  color: green;
}
</style>