Vue項目 設置實時時間（年月日 時分秒）兩種方法

 

想要的效果：（時間動態顯示）

 

1.在data中定義一個變量，存儲時間

 

 

2.創建一個文件放入封裝好的js

--主要是使用定時器，每秒調用，最后清除定時器

 

 

export function formatDate(date) {
  // 格式化時間為 YYYY-MM-DD HH:MM:SS
  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(year)}年${check(month)}月${check(day)}日  ${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)}`;

}

 

 

3.引入封裝好的js

 

 

 

import { formatDate } from "@/utils/index";
export default {
  data() {
    return {
      
      nowDate: "",
      timeArry: ""
    };
  },
  mounted() {
   
  },
  created() {
    
    this.timeArry = formatDate(new Date());
    this.timeStart();
  },
  methods: {
    timeStart() {
      // 設置定時器
      this.timer = setInterval(() => {
        this.timeArry = formatDate(new Date());
      }, 1000);
    }
  }
};

 

 

4.定義一個div

{{timeArry.timeText}}

 

 

 

 

 

 

 

 

 

方法二：（vue.js）

 

效果如下:

 

 

new Date().getTime()     獲取時間戳

 

 

 

 

 

核心代碼如下:

 

 <!-- date -->
    <div class="timeBox padding-xl">
      <p class="text-24 text-white" v-html="formateTimeStamp(date)"></p>
    </div>

 

data: function () {
    return {
      date: new Date().getTime()
    }
  },
  mounted: function () {

  },
  created: function () {
    this.loadTime()
  },
  methods: {
    loadTime() {
      var _this = this;
      setInterval(() => {
        _this.date += 1000;
      }, 1000);

      // this.$api.serveTime({}).then(res => {
      //   console.log("服務器時間", res);
      //   var _this = this;
      //   _this.servertime = res;
      //   setInterval(() => {
      //     _this.date += 1000;
      //     console.log(_this.date, '**');
      //   }, 1000);
      // });
    },
    // 轉換時間戳
    formateTimeStamp(time) {
      var date = new Date(time);
      var year = date.getFullYear();
      var month =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1;
      var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      var hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
      var minute =
        date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      var second =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      var week = ["日", "一", "二", "三", "四", "五", "六"][date.getDay()];
      // return year + "年" + month + "月" + day + "日" + hour + ":" + minute + ":" + second;
      return (
        '<span style="font-size: 66px; text-shadow: 0px 2px 7px rgba(51, 51, 51, 0.6);">' +
        hour +
        ":" +
        minute + ":" + second +
        "</span><br/>" +
        year +
        "年" +
        month +
        "月" +
        day +
        "日" +
        "&nbsp;&nbsp;&nbsp;星期" +
        week
      );
    },
}

 

 

 

 

 

 

 

大功告成~~

 

 

作者：微微一笑絕絕子
出處：https://www.cnblogs.com/wwyxjjz/p/15753364.html
本博客文章均為作者原創，轉載請注明作者和原文鏈接。