实时显示时间。时分秒，年月日

南城旧梦heihei

已于 2023-09-08 14:36:39 修改

阅读量85

点赞数

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

于 2023-09-08 14:35:17 首次发布

本文链接：https://blog.csdn.net/xunhaomeng/article/details/132759663

版权

Vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<div>{{ date }}</div>
  <div>{{ timeArryYear }}</div>

//timeControl.js文件

// 时分秒
export function formatDate() {
    // 格式化时间为 YYYY-MM-DD HH:MM:SS
    var date=new Date();
    var year = date.getFullYear();
    var month = date.getMonth() + 1;
    var day = date.getDate();
    var hours = date.getHours();
    var minutes = date.getMinutes();
    var seconds = date.getSeconds(); // 判断是不是小于10 返回01 02 03
    function check(num) {
      if (num < 10) {
        // 如果数字小于10,前边拼接个0
        return "0" + num;
      } else {
        return num;
      }
    }
    let timeArry = {};
    let timeText = `${check(hours)}:${check(minutes)}:${check(seconds)}`;
    // let nowDay = date.getDay();
    // let weeks = new Array(
    //   "星期日",
    //   "星期一",
    //   "星期二",
    //   "星期三",
    //   "星期四",
    //   "星期五",
    //   "星期六"
    // );
    // let week = weeks[nowDay]; // let state = ``; // // 判断当前时间段 // if (hours >= 0 && hours <= 10) { //   state = `早上`; // } else if (hours > 10 && hours <= 14) { //   state = `中午`; // } else if (hours > 14 && hours <= 18) { //   state = `下午`; // } else if (hours > 18 && hours <= 24) { //   state = `晚上`; // }
    timeArry.timeText = timeText;
    //timeArry.week = week; // timeArry.state = state;
    return timeArry; // 时间展示 // return ` //         ${check(year)}年 //         ${check(month)}月 //         ${check(day)}日 //         ${check(hours)} : //         ${check(minutes)} : //         ${check(seconds)}`;
}
// 年月日
export function yearformatDate() {
    // 格式化时间为 YYYY-MM-DD HH:MM:SS
    var date=new Date();

    var year = date.getFullYear();
    var month = date.getMonth() + 1;
    var day = date.getDate();
    var hours = date.getHours();
    var minutes = date.getMinutes();
    var seconds = date.getSeconds(); // 判断是不是小于10 返回01 02 03
    function check(num) {
      if (num < 10) {
        // 如果数字小于10,前边拼接个0
        return "0" + num;
      } else {
        return num;
      }
    }
    let timeArryYear = {};
    let timeText = `${check(year)} ${check(month)} ${check(day)}`;
    // let nowDay = date.getDay();
    // let weeks = new Array(
    //   "星期日",
    //   "星期一",
    //   "星期二",
    //   "星期三",
    //   "星期四",
    //   "星期五",
    //   "星期六"
    // );
    // let week = weeks[nowDay]; // let state = ``; // // 判断当前时间段 // if (hours >= 0 && hours <= 10) { //   state = `早上`; // } else if (hours > 10 && hours <= 14) { //   state = `中午`; // } else if (hours > 14 && hours <= 18) { //   state = `下午`; // } else if (hours > 18 && hours <= 24) { //   state = `晚上`; // }
    timeArryYear.timeText = timeText;
    //timeArry.week = week; // timeArry.state = state;
    return timeArryYear; // 时间展示 // return ` //         ${check(year)}年 //         ${check(month)}月 //         ${check(day)}日 //         ${check(hours)} : //         ${check(minutes)} : //         ${check(seconds)}`;
}

import { formatDate, yearformatDate } from "../../utils/timeControl";//引入上面文件
export default {
  data() {
    return {
      date: null,
      timeArryYear: null,
    };
  },
  mounted() {
    let _this = this; // 声明一个变量指向Vue实例this，保证作用域一致
    this.timer = setInterval(() => {
      _this.date = formatDate().timeText; // 修改数据date
      _this.timeArryYear = yearformatDate().timeText;
    }, 1000);
  },

  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer); // 在Vue实例销毁前，清除我们的定时器
    }
  },

  methods: {},
};