实现功能:
演出预告页面内
如果节目正在当前时间段进行,那么时间字段为红色。
如果节目已结束,那么时间字段为灰色。
如果节目未开始,那么时间字段为默认黑色。
实现思路:
先获取到当前时间
获取到数据内节目的开始与结束时间
用replace()方法去除时间段内的符号(:)
用slice()方法截取时间
用vue中:class方法结合if else 改变时间段的颜色(状态)
<template>
<div>
<div class="">
演出时间预告:
</div>
<!-- 这里只判断time_data数据中下标为0的时间段,其他时间段未做判断 -->
<p :class="{cls:underway,clss:finished}">{{time_data[0].start}}-{{time_data[0].end}}</p>
<p>{{time_data[1].start}}-{{time_data[1].end}}</p>
<p>{{time_data[2].start}}-{{time_data[2].end}}</p>
</div>
</template>
<script>
export default {
data() {
return {
underway: '',
finished: '',
getTime: '',
time_data: [{
id: 1,
name: '孔雀开屏',
start: '12:00:00',
end: '14:00:00'
}, {
id: 2,
name: '猴子上树',
start: '08:00:00',
end: '10:00:00'
},
{
id: 3,
name: '蚂蚁搬家',
start: '20:00:00',
end: '22:00:00'
}
]
}
},
methods: {
getCurrentTime() {
//获取当前时间并打印
var _this = this;
// let yy = new Date().getFullYear();年获取
// let mm = new Date().getMonth() + 1;月获取
// let dd = new Date().getDate();日获取
let hh = new Date().getHours();
let mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes();
let ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds();
// _this.getTime = yy + '/' + mm + '/' + dd + ' ' + hh + ':' + mf + ':' + ss;/
_this.getTime = hh + ':' + mf + ':' + ss;
console.log(_this.getTime); //打印获取到的时间
let get_time = _this.getTime.replace(':', ''); //去除 :符号
console.log(get_time);
let begin_ = this.time_data[0].start.replace(':', ''); //去除数组time_data中下标为0的开始时间中的:符号
console.log(begin_);
let end_ = this.time_data[0].end.replace(':', ''); //去除数组time_data中下标为0的结束时间中的:符号
console.log(end_);
let get_time1 = get_time.slice(0, 4); //截取前四位时间数
console.log(get_time1);
let begin_1 = begin_.slice(0, 4);
console.log(begin_1);
let end_1 = end_.slice(0, 4);
console.log(end_1);
// 如果当前时间大于等于开始时间且小于等于结束时间,(代表当前时间是表演时间,)那么这个类为真,就为它添加类名为cls的这个类,否则就不添加
if (get_time1 >= begin_1 && get_time1 <= end_1) {
this.underway = true;
} else {
this.underway = false;
};
// 如果当前时间大于等于开始时间且大于等于结束时间,(代表表演已结束,)那么这个类为真,就为它添加类名为cls的这个类,否则就不添加
if (get_time1 >= begin_1 && get_time1 >= end_1) {
this.finished = true;
} else {
this.finished = false;
}
console.log(this.underway);
},
},
mounted() {
this.getCurrentTime();
}
}
</script>
<style>
.cls {
color: green;
}
.clss {
color: gainsboro;
}
</style>