【vue+js】手写实现一个可以自定义开始时间的电子时钟

背景：
一个电子时钟，可以在日期框内选择电子时钟开始的时间，让时钟回到自定义的开始时间，可以是过去的某一个时间作为时钟的开始时间，也可以是未来的某一个时间作为时钟的开始时间。
此组件类似于手写一个电子时钟，不用获取当前系统时间的方法。

介绍：
此组件添加了平闰年判断还要大小月判断等。仅供参考，如有bug，欢迎评论随时修改。

附：
组件码云仓库地址：https://gitee.com/yjy1351651171/custom-clock.git

输出成品：

html界面：

<template>
  <div class="index">
    <div>
      <el-date-picker
        v-model="startTime"
        type="datetime"
        placeholder="选择开始时间"
        value-format="yyyy-MM-dd HH:mm"
        format="yyyy-MM-dd HH:mm"
      >
      </el-date-picker>
      <el-button size="small" type="primary" @click="choose()">确认</el-button>
      <el-button size="small" type="primary" @click="goBack()"
        >当前时间</el-button
      >
    </div>
    <div>
      <div class="nowYear">{{ nowTime.trim().split(" ")[0] }}</div>
      <div class="nowTimeDetail">{{ nowTime.trim().split(" ")[1] }}</div>
    </div>
  </div>
</template>

全局变量声明：

 data() {
    return {
      startTime: "", //存储绑定picker组件选择的时间
      nowTime: "", //用于展示
      timers: "", //自定义时间定时器
      timer: "", //当前系统时间定时器
      isNowTime: true, //是否选择了自定义时间的号状态
    };
  },

方法声明

1.实时获取当前系统时间方法

 getTime() {
      clearInterval(this.timers);
      this.timer = setInterval(() => {
        let timeDate = new Date();
        let years = timeDate.getFullYear(); //年
        let month = timeDate.getMonth() + 1; //月
        month = month >= 10 ? month : "0" + month;
        let days = timeDate.getDate(); //日
        days = days >= 10 ? days : "0" + days;
        let hours = timeDate.getHours();
        hours = hours >= 10 ? hours : "0" + hours;
        let minutes = timeDate.getMinutes();
        minutes = minutes >= 10 ? minutes : "0" + minutes;
        let seconds = timeDate.getSeconds();
        seconds = seconds >= 10 ? seconds : "0" + seconds;
        this.nowTime = `${years}-${month}-${days} ${hours}:${minutes}:${seconds}`;
      }, 1000);
    },

2.获取选择的开始时间方法

    getHistoryTime() {
      clearInterval(this.timer); //清除timer定时器
      var that = this;
      this.timers = setInterval(() => {
        let a;
        if (that.isNowTime) {
          a = that.sendTime.startTime;
        } else {
          a = that.nowTime.replaceAll("/", "-");
        }
        let yearAll = a.split(" ")[0];
        let timeAll = a.split(" ")[1];
        // 闰年2月29天，平年2月28天
        // 判断是否为闰年
        let isLeap =
          yearAll.split("-")[0] % 400 == 0 ||
          (yearAll.split("-")[0] % 100 != 0 && yearAll.split("-")[0] % 4 == 0);
        let February = isLeap ? 29 : 28; //计算2月天数
        let str = isLeap ? "闰年，2月29天" : "平年2月28天";
        let bigMonth = [1, 3, 5, 7, 8, 10, 12]; //1个月31天
        let smallMonth = [4, 6, 9, 11]; //1个月30天
        let years = yearAll.split("-")[0]; //年
        let month = yearAll.split("-")[1]; //月
        let days = yearAll.split("-")[2]; //日
        let hours = timeAll.split(":")[0]; //时
        let minutes = timeAll.split(":")[1]; //分
        let seconds = timeAll.split(":")[2]; //秒
        // 秒
        if (Number(seconds) >= 0 && Number(seconds) < 9) {
          seconds = `0${Number(seconds) + 1}`;
        } else if (Number(seconds) >= 9 && Number(seconds) < 59) {
          seconds = Number(seconds) + 1;
        } else if (Number(seconds) >= 59) {
          seconds = "00";
          // 分
          if (Number(minutes) >= 0 && Number(minutes) < 10) {
            minutes = `0${Number(minutes) + 1}`;
          } else if (Number(minutes) >= 10 && Number(minutes) < 59) {
            minutes = Number(minutes) + 1;
          } else if (Number(minutes) >= 59) {
            minutes = "00";
            // 时
            if (Number(hours) >= 0 && Number(hours) < 10) {
              hours = `0${Number(hours) + 1}`;
            } else if (Number(hours) >= 10 && Number(hours) < 23) {
              hours = Number(hours) + 1;
            } else if (Number(hours) <= 23) {
              hours = "00";
              // 天
              // 判断闰年还是平年，大月还是小月
              // 先判断是不是2月份
              if (Number(month) == 2) {
                console.log(February);
                console.log(February - 1);
                if (Number(days) > 0 && Number(days) < 9) {
                  days = `0${Number(days) + 1}`;
                } else if (Number(days) >= 9 && Number(days) < February) {
                  days = Number(days) + 1;
                } else if (Number(days) >= February) {
                  days = "01";
                  if (Number(month) > 0 && Number(month) < 9) {
                    month = `0${Number(month) + 1}`;
                  } else if (Number(month) >= 9 && Number(month) < 11) {
                    month = Number(month) + 1;
                  } else if (Number(month) >= 11) {
                    month = "01";
                    years = Number(years) + 1;
                  }
                }
              } else if (Number(month) != 2) {
                // 判断如果是大月
                if (bigMonth.includes(Number(month))) {
                  if (Number(days) > 0 && Number(days) < 9) {
                    days = `0${Number(days) + 1}`;
                  } else if (Number(days) >= 9 && Number(days) < 31) {
                    days = Number(days) + 1;
                  } else if (Number(days) >= 31) {
                    days = "01";
                    // 月
                    if (Number(month) > 0 && Number(month) < 9) {
                      month = `0${Number(month) + 1}`;
                    } else if (Number(month) >= 9 && Number(month) < 11) {
                      month = Number(month) + 1;
                    } else if (Number(month) >= 11) {
                      month = "01";
                      years = Number(years) + 1;
                    }
                  }
                } else if (smallMonth.includes(Number(month))) {
                  if (Number(days) > 0 && Number(days) < 9) {
                    days = `0${Number(days) + 1}`;
                  } else if (Number(days) >= 9 && Number(days) < 29) {
                    days = Number(days) + 1;
                  } else if (Number(days) >= 29) {
                    days = "01";
                    // 月
                    if (Number(month) > 0 && Number(month) < 9) {
                      month = `0${Number(month) + 1}`;
                    } else if (Number(month) >= 9 && Number(month) < 11) {
                      month = Number(month) + 1;
                    } else if (Number(month) >= 11) {
                      month = "01";
                      years = Number(years) + 1;
                    }
                  }
                }
              }
            }
          }
        }
        that.nowTime = `${years}-${month}-${days} ${hours}:${minutes}:${seconds}`;
      }, 1000);
    },

3.点击确认函数

    choose() {
      this.isNowTime = false;
      let time = `${this.startTime}:00`;
      this.nowTime = time;
      clearInterval(this.timers);
      this.getHistoryTime();
    },

4.回到当前时间函数

    goBack() {
      this.getTime();
    },

5.在mounted中调用一次初始时间

  mounted() {
    this.getTime();
  },

欢迎大家随时讨论。谢谢。