<template>
<!-- 时间条 总区域-->
<div class="time">
<!-- 时间 左边 -->
<div class="time-l">
<div>今天是</div>
<div>{{nowDate}} </div>
<div>{{nowTime}} </div>
<div>{{nowWeek}}</div>
</div>
<!-- 时间 右边 -->
<div class="time-r"></div>
</div>
</template>
<script>
export default {
data() {
return {
// 时间变量
timer: null,
nowWeek: "",
nowDate: "",
nowTime: "",
};
},
mounted() {
// 调用时间方法
this.timer = setInterval(() => {
this.setNowTimes();
}, 1000);
},
methods: {
setNowTimes() {
//获取当前时间
let myDate = new Date();
let wk = myDate.getDay();
let yy = String(myDate.getFullYear());
let mm = myDate.getMonth() + 1;
let dd = String(
myDate.getDate() < 10 ? "0" + myDate.getDate() : myDate.getDate()
);
let hou = String(
myDate.getHours() < 10 ? "0" + myDate.getHours() : myDate.getHours()
);
let min = String(
myDate.getMinutes() < 10
? "0" + myDate.getMinutes()
: myDate.getMinutes()
);
let sec = String(
myDate.getSeconds() < 10
? "0" + myDate.getSeconds()
: myDate.getSeconds()
);
let weeks = [
"星期日",
"星期一",
"星期二",
"星期三",
"星期四",
"星期五",
"星期六",
];
let week = weeks[wk];
this.nowDate = yy + "年" + mm + "月" + dd + '日';
this.nowTime = hou + ":" + min + ":" + sec;
this.nowWeek = week;
},
},
};
</script>
<style lang="scss" scoped>
// 时间 总区域
.time {
width: 100%;
height: 50px;
// background-color: #124daf;
background-color: rgba(#124daf, 0.9);
// 时间左边
.time-l {
width: 50%;
height: 100%;
font-size: 14px;
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
}
// 时间右边
.time-r {
width: 50%;
height: 100%;
}
}
</style>
