及时时间+农历 + 天气 获取当前时间 获取农历日期
发布时间
阅读量：
阅读量
<template>
<div class="showTimes">
<div>{{ this.nowdate }}</div>
<div>{{ this.lunarYear }}</div>
<div>{{ this.time }}</div>
<div id="he-plugin-simple"></div>
</div>
</template>
<script>
import { fontChart } from "@/utils/echartPxToRem.js";
import { getLunar } from "chinese-lunar-calendar";
export default {
data() {
return {
nowdate: "",
time: "",
lunarYear: "",
getLunarDay: "",
year: new Date().getFullYear(),
month: new Date().getMonth() + 1,
date: new Date().getDate()
};
},
mounted() {
this.timer = setInterval(() => {
this.getNowTime();
}, 1000);
window.WIDGET = {
CONFIG: {
modules: "024",
background: "5",
tmpColor: "FFFFFF",
tmpSize: fontChart(0.22),
// "cityColor": "FFFFFF",
// "citySize": fontChart(0.22),
aqiColor: "FFFFFF",
aqiSize: fontChart(0.22),
weatherIconSize: fontChart(0.4),
alertIconSize: fontChart(0.22),
shadow: "0",
language: "auto",
fixed: "false",
// "vertical": "middle",
horizontal: "left",
key: "93cf0817b61045c999ee4c7a1ec003d1"
}
};
let script = document.createElement("script");
script.type = "text/javascript";
script.src =
"https://widget.qweather.net/simple/static/js/he-simple-common.js?v=2.0";
document.getElementsByTagName("head")[0].appendChild(script);
},
destroyed() {
if (this.timer) {
clearInterval(this.timer);
}
},
methods: {
//获取当前时间
getNowTime() {
var date = new Date();
var hour = date.getHours();
var minute = date.getMinutes();
var second = date.getSeconds();
//获取当前年月日 时分秒
this.nowdate =
this.year +
"/" +
this.addZero(this.month) +
"/" +
this.addZero(this.date);
this.time =
this.addZero(hour) +
":" +
this.addZero(minute) +
":" +
this.addZero(second);
// 获取农历
this.getLunarDay = getLunar(this.year, this.month, this.date);
this.lunarYear =
this.getLunarDay.lunarYear + "农历" + this.getLunarDay.dateStr;
// console.log(this.nowdate);
// console.log(this.time,'time');
// console.log(this.lunarYear,'day')
},
//小于10的拼接上0字符串
addZero(s) {
return s < 10 ? "0" + s : s;
}
}
};
</script>
农历:
vue通过chinese-lunar-calendar获取农历日期
第三方插件 chinese-lunar-calendar,我们先安装依赖:
npm install --save chinese-lunar-calendar
我们先要在需要使用的组件中引入他的getLunar 日期转换函数
import { getLunar } from 'chinese-lunar-calendar'
然后 在组件中可以使用这个函数做日期转换
例如 我这里定义一个这样的函数
getLunar() {
let data = getLunar(new Date().getFullYear(), (new Date().getMonth() + 1), new Date().getDate());
console.log(data);
return data.dateStr
},
这里可以看到 我们需要传对应的年月日时间去给getLunar函数做转换
然后 我们运行代码
全部评论 (0)
还没有任何评论哟~