vue系统-实现右上角时间实时更新-parseTime

原创已于 2023-12-21 09:41:30 修改 · 823 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js #前端 #javascript

于 2023-07-19 09:59:43 首次发布

前端开发同时被 2 个专栏收录

93 篇文章

订阅专栏

vue

29 篇文章

订阅专栏

该代码段展示了一个Vue.js组件，用于在页面上实时显示日期和时间，包括年月日、星期和时分秒。它使用了自定义的`parseTime`函数来格式化时间，并通过设置定时器每秒更新时间信息。

在这里插入图片描述

<template>
  <div
    style="font-family: Roboto-Bold, Roboto; font-weight: bold; color: #1977c4;text-align:right;width: 100%;"
  >
    <span>{{ timeInfo.ymd }}</span>
    <span>{{ timeInfo.week }}</span>
    <span>{{ timeInfo.time }}</span>
  </div>
</template>
  
  <script>
import { parseTime } from "@/utils";
export default {
  components: {},
  props: {},
  data() {
    return {
      timeInfo: {
        ymd: "",
        week: "",
        time: "",
      },
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.initTime();
  },
  methods: {
    initTime() {
      clearInterval(this.$el.initTimer);
      //let timer = setInterval(() => {
      //  this.timeInfo.ymd = parseTime(new Date(), "{yy}-{mm}-{dd}");
      //  this.timeInfo.week = parseTime(new Date(), "星期{a}");
      //  this.timeInfo.time = parseTime(new Date(), "{hh}:{ii}:{ss}");
      //});
      //火狐33
      let timer = setInterval(() => {
        this.timeInfo.ymd = parseTime(new Date(), "{yy}-{mm}-{dd}");
        this.timeInfo.week = parseTime(new Date(), "星期{a}");
        this.timeInfo.time = parseTime(new Date(), "{hh}:{ii}:{ss}");
      },1000);
      this.$el.initTimer = timer;
    },
  },
};
</script>
  <style scoped lang='scss'>
</style>

<timeInfo class="timeInfo"></timeInfo>
import timeInfo from "./components/timeInfo.vue";

components: {  timeInfo },