vue 获取当前时间(并与演出时间对比做出状态改变)
功能需求:
演出预告页面内如果节目正在当前时间段进行,那么时间字段为绿色。如果节目已结束,那么时间字段为灰色。如果节目未开始,那么时间字段为默认黑色。实现思路:
获取到当前时间获取到数据内节目的开始与结束时间用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>
功能实现~~
谢谢