vue專案中回顯當前時間的農曆時間
阿新 • • 發佈:2021-07-28
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>