【vue】时间组件--chrome插件开发

介绍

这是一个Vue3数字时钟组件，支持多种时间显示格式。
- 主要功能包括：
- 1. 可切换12/24小时制；
- 2. 可选显示秒数；
- 3. 支持日期显示；
- 4. 可选显示年份和星期。

• 组件使用了CSS毛玻璃效果，具有半透明背景和模糊效果。通过setInterval实现实时更新时间，并在组件销毁时清除定时器。组件采用响应式设计，通过props控制各元素的显示/隐藏状态，包括时分秒、年月日、星期等信息的显示选项。

实现效果

代码重点

• 实现主要依靠Date对象的方法加上定时器。当然也可以使用moment.js,或者其他的时间插件实现。

function handlerDateAndTimeFn() {
  isShowBox.value = true;
  const now = new Date();
  curYears.value = now.getFullYear(); // 年份
  curMonth.value = now.getMonth() + 1; // 月份
  curDay.value = now.getDate(); // 日
  curHours24.value = now.getHours(); //小时:24小时制
  curMinutes.value =
    now.getMinutes() < 10 ? "0" + now.getMinutes() : now.getMinutes(); //分钟
  curSeconds.value =
    now.getSeconds() < 10 ? "0" + now.getSeconds() : now.getSeconds(); //秒
  dayName.value = days[now.getDay()];
}

timerObj.value = setInterval(() => {
  handlerDateAndTimeFn();
}, 1000);

全部代码

<script setup>
import {
  ref,
  defineOptions,
  computed,
  defineProps,
  onBeforeUnmount,
} from "vue";
defineOptions({
  name: "timeNum", //日期组件
});

const props = defineProps({
  isShow12: {
    //切换12/24小时制
    type: Boolean,
    default: false,
  },
  isShowSeconds: {
    //秒
    type: Boolean,
    default: true,
  },
  isShowDate: {
    //日期
    type: Boolean,
    default: true,
  },
  isShowYears: {
    //年
    type: Boolean,
    default: false,
  },
  isShowWeek: {
    //周
    type: Boolean,
    default: false,
  },
});
let days = ["天", "一", "二", "三", "四", "五", "六"];

// 当前组件涉及功能
// 上边涉及功能   -24/12 -时分秒 -年月日 -周
let isShowBox = ref(false);
let curHours24 = ref("");
let curMinutes = ref("");
let curSeconds = ref("");
let curYears = ref("");
let curMonth = ref("");
let curDay = ref("");
let dayName = ref("");
let timerObj = ref(null);
let curHours12 = computed(() => {
  let result = "00";
  result = curHours24.value > 12 ? curHours24.value - 12 : curHours24.value;
  result = result < 10 ? "0" + result : result;
  return result;
});
// 下边功能  -农历

// 通用 -加粗 -字体大小 -字体 -颜色

function handlerDateAndTimeFn() {
  isShowBox.value = true;
  const now = new Date();
  curYears.value = now.getFullYear(); // 年份
  curMonth.value = now.getMonth() + 1; // 月份
  curDay.value = now.getDate(); // 日
  curHours24.value = now.getHours(); //小时:24小时制
  curMinutes.value =
    now.getMinutes() < 10 ? "0" + now.getMinutes() : now.getMinutes(); //分钟
  curSeconds.value =
    now.getSeconds() < 10 ? "0" + now.getSeconds() : now.getSeconds(); //秒
  dayName.value = days[now.getDay()];
}
timerObj.value = setInterval(() => {
  handlerDateAndTimeFn();
}, 1000);

onBeforeUnmount(() => {
  if (timerObj.value) {
    clearInterval(timerObj.value);
  }
});
</script>
<template>
  <div class="time-num-wrapper glass-effect-0" v-if="isShowBox">
    <div class="time-num-content">
      <div class="time-num-top">
        <span v-if="isShow12">{{ curHours12 }} </span>
        <span v-else>{{ curHours24 }} </span>
        <span>:</span>
        <span>{{ curMinutes }} </span>
        <span v-if="isShowSeconds">
          <span>:</span>
          <span>{{ curSeconds }}</span>
        </span>
      </div>
      <div class="date-num-bottom">
        <div class="date-num-box">
          <span v-if="isShowYears">{{ curYears }}年</span>
          <span>{{ curMonth }}月</span>
          <span>{{ curDay }}日</span>
        </div>
        <div class="date-week-box" v-if="isShowWeek">星期{{ dayName }}</div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.glass-effect-0 {
  background: rgba(99, 99, 99, 0.5) !important; /* 半透明背景 */
  border-radius: 16px; /* 圆角 */
  backdrop-filter: blur(5px); /* 模糊效果 */
  border: 1px solid rgba(255, 255, 255, 0.5); /* 边框 */
  color: #fff;
}
.time-num-wrapper {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border-radius: 5px;
}
.time-num-content {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.time-num-top {
  font-size: 30px;
  line-height: 30px;
  font-weight: 700;
  margin-bottom: 15px;
}
.date-num-bottom {
  display: flex;
  font-size: 14px;
}
</style>