(1)例子1-原生方法-定时查询
<template>
<div class="now-time" :style="calStyle">
<div class="now-time-time">{{ nowTime }}</div>
<div class="now-time-date">
<div>{{ nowWeek }}</div>
<div>{{ nowDate }}</div>
</div>
</div>
</template>
<script>
import dataset from "./index";
export default {
name: dataset.element,
mixin: [],
components: {
},
props: {
datasetdata: {
type: Object,
},
wallData: {
type: Object,
},
},
data() {
return {
width: this.datasetdata.width,
height: this.datasetdata.height,
//当前日期
nowDate: "1970-01-01",
//当前时间
nowTime: "00:00:00",
//当前星期
nowWeek: "星期日",
};
},
computed: {
calStyle() {
return {
width: this.width + "px",
height: this.height + "px",
};
},
},
mounted() {
this.getDate();
setInterval(() => {
this.getDate();
}, 1000);
},
methods: {
onResize(w, h) {
this.width = w;
this.height = h;
},
//获取当前时间
getDate() {
let newDate = new Date();
let years = newDate.getFullYear();
let months =
newDate.getMonth() + 1 >= 10
? newDate.getMonth() + 1
: "0" + (newDate.getMonth() + 1);
let dates =
newDate.getDate() >= 10 ? newDate.getDate() : "0" + newDate.getDate();
let hours =
newDate.getHours() >= 10
? newDate.getHours()
: "0" + newDate.getHours();
let minutes =
newDate.getMinutes() >= 10
? newDate.getMinutes()
: "0" + newDate.getMinutes();
let seconds =
newDate.getSeconds() >= 10
? newDate.getSeconds()
: "0" + newDate.getSeconds();
let day = newDate.getDay(); //获取当前是星期几 周一返回1,周六返回6,周日返回0
let arr = [
"星期日",
"星期一",
"星期二",
"星期三",
"星期四",
"星期五",
"星期六",
];
this.nowDate = years + "年" + months + "月" + dates + "日";
this.nowTime = hours + ":" + minutes + ":" + seconds;
this.nowWeek = arr[day];
},
},
};
</script>
<style scoped lang="less">
.dvm-doc-pudongAirport-now-time {
text-align: left;
width: 100%;
height: 100%;
&-time {
display: inline-block;
width: 110px;
font-family: DINPro-Medium;
font-size: 26px;
font-weight: normal;
font-stretch: normal;
line-height: 30px;
letter-spacing: 2px;
color: #ffffff;
text-shadow: 0 0 10px #ffffff;
vertical-align: middle;
}
&-date {
margin-left: 8px;
display: inline-block;
font-family: AdobeHeitiStd-Regular;
font-size: 8px;
font-weight: normal;
font-stretch: normal;
line-height: 15px;
letter-spacing: 0px;
color: #9fa5a4;
opacity: 0.57;
vertical-align: middle;
}
}
</style>
(2)例子2、moment()方法-定时查询
<div class="header">
<span class="header-time">{{currentTime}}</span>
</div>
mounted() {
//更新时间
this.getCurrentDate();
this.timer = setInterval(() => {
this.getCurrentDate();
}, 1000)
},
//时间显示
getCurrentDate() {
this.currentTime = moment().format('YYYY-MM-DD HH:mm:ss')
},