1. 程式人生 > 其它 >vue專案中回顯當前時間的農曆時間

vue專案中回顯當前時間的農曆時間

npm安裝

npm install --save chinese-lunar-calendar
vue中用法

   <div class="right-cla">{{nowTime}}</div>
   <div class="center-cla">
      <div>  {{nowDate}} </div>
      <div>農曆:{{getLunarDay.dateStr}}</div>
  </div>
<script>
import { getLunar } from 'chinese-lunar-calendar'

export default {
  data() {
    return {
        nowDate: "", // 當前日期
        nowTime: "", // 當前時間
        getLunarDay: '',// 當前農曆時間
	year: new Date().getFullYear(),
      	month: new Date().getMonth() + 1,
      	date: new Date().getDate()
    }
  },
  mounted() {
	// 獲取農曆
    this.getLunarDay = getLunar(this.year, this.month, this.date)
    // 獲取當前時間 
    this.currentTime();
  },
 methonds:{
     //獲取當前時間
            currentTime() {
                setInterval(this.formatDate, 500);
            },
            formatDate() {
                let date = new Date();
                let year = date.getFullYear(); // 年
                let month = date.getMonth() + 1; // 月
                month = month < 10 ? "0" + month : month; // 如果只有一位,則前面補零
                let day = date.getDate(); // 日
                day = day < 10 ? "0" + day : day; // 如果只有一位,則前面補零
                let week = date.getDay(); // 星期
                let weekArr = [ "星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六" ];
                let hour = date.getHours(); // 時
                hour = hour < 10 ? "0" + hour : hour; // 如果只有一位,則前面補零
                let minute = date.getMinutes(); // 分
                minute = minute < 10 ? "0" + minute : minute; // 如果只有一位,則前面補零
                let second = date.getSeconds(); // 秒
                second = second < 10 ? "0" + second : second; // 如果只有一位,則前面補零
                this.nowDate = `${year}/${month}/${day}    ${weekArr[week]}`;
                this.nowTime = `${hour}:${minute}`;
            },
}
}
</script>