vuejs实现倒计时
1.短信60s倒计时
代码实现 :
a)html结构
b)样式
c)逻辑
效果如下：
2.秒杀倒计时
代码如下：
a)html结构
距开始还剩
{{day}} 天 {{hours}} 时 {{minut}} 分 {{second}} 秒
距结束还剩
{{day}} 天 {{hours}} 时 {{minut}} 分 {{second}} 秒
活动已结束
b)css样式
c)逻辑
import {SecondToDate} from '@/utils/auth';
export default{
name: 'addCountDown',
props: {
curdata: {
type: Object,
default: null
},
time: {
type: Array,
default: null
}
},
data(){
return {
isStart: false,
isEnd: false,
curTimer: null,
day: '',
hours: '',
minut: '',
second: ''
}
},
watch: {
time(){
if (this.time) {
clearInterval(this.curTimer)
this.initTime();
}
},
curdata(){
if (this.time) {
clearInterval(this.curTimer)
this.initTime();
}
}
},
created(){
if (this.time) {
clearInterval(this.curTimer)
this.initTime();
}
},
methods: {
initTime(){
if (this.time) {
if (this.time[0] - new Date().getTime() > 0) {
this.isStart = false;
this.isEnd = false;
} else {
this.isStart = true;
if (this.time[1] - new Date().getTime() > 0) {
this.isEnd = false;
} else {
this.isEnd = true;
}
}
let _this = this;
if (this.isStart && !this.isEnd) {
//开始还未结束
if (_this.time[1] - new Date().getTime() > 0) {
_this.curTimer = setInterval(() => {
_this.curTime = SecondToDate(_this.time[1]);
_this.initFormate(_this.curTime);
}, 1000)
}
} else if (!this.isStart) {
if (_this.time[0] - new Date().getTime() > 0) {
_this.curTimer = setInterval(() => {
_this.curTime = SecondToDate(_this.time[0]);
_this.initFormate(_this.curTime);
}, 1000)
}
}
}
},
initFormate(curTime){
if (curTime.indexOf('天') != -1) {
this.day = curTime.split('天')[0];
this.hours = curTime.split('天')[1].split(':')[0];
this.minut = curTime.split('天')[1].split(':')[1];
this.second = curTime.split('天')[1].split(':')[2];
} else {
this.day = '00';
this.hours = curTime.split(':')[0];
this.minut = curTime.split(':')[1];
this.second = curTime.split(':')[2];
}
}
}
}SecondToDate方法===》将时间戳格式转换为 __天__:__:__格式
代码如下：
export function SecondToDate(msd) {
let curTime = msd - new Date().getTime();
var time = curTime / 1000;
if (null != time && "" != time) {
if (time > 60 && time < 60 * 60) {
time = parseInt(time / 60.0) + ":" + parseInt((parseFloat(time / 60.0) -
parseInt(time / 60.0)) * 60);
}
else if (time >= 60 * 60 && time < 60 * 60 * 24) {
time = parseInt(time / 3600.0) + ":" + parseInt((parseFloat(time / 3600.0) -
parseInt(time / 3600.0)) * 60) + ":" +
parseInt((parseFloat((parseFloat(time / 3600.0) - parseInt(time / 3600.0)) * 60) -
parseInt((parseFloat(time / 3600.0) - parseInt(time / 3600.0)) * 60)) * 60);
} else if (time >= 60 * 60 * 24) {
time = parseInt(time / 3600.0 / 24) + "天" + parseInt((parseFloat(time / 3600.0 / 24) -
parseInt(time / 3600.0 / 24)) * 24) + ":" + parseInt((parseFloat(time / 3600.0) -
parseInt(time / 3600.0)) * 60) + ":" +
parseInt((parseFloat((parseFloat(time / 3600.0) - parseInt(time / 3600.0)) * 60) -
parseInt((parseFloat(time / 3600.0) - parseInt(time / 3600.0)) * 60)) * 60);
}
else {
time = parseInt(time);
}
}
let curtime = '';
if (time.indexOf('天') == -1) {
curtime = time.split(':');
} else {
curtime = time.split('天')[1].split(':');
}
let curArr = '';
for (let a = 0; a < curtime.length; a++) {
let item = curtime[a];
if (item < 10) {
item = '0' + item;
}
if (a < curtime.length - 1) {
curArr += item + ':';
} else {
curArr += item;
}
}
if (time.indexOf('天') != -1) {
curArr = time.split('天')[0] + '天' + curArr;
if (time.split('天')[0] < 10) {
curArr = '0' + curArr;
}
}
return curArr;
}效果如下：
3.日期星期时间显示
代码如下：
a)html结构
{{curTime.getDay() | filterDate}}
{{curTime.getFullYear()}}年{{curTime.getMonth()+1<10?'0'+(curTime.getMonth()+1):(curTime.getMonth()+1)}}月{{curTime.getDate()<10?'0'+curTime.getDate():curTime.getDate()}}日
{{curTime.getHours()<10?'0'+curTime.getHours():curTime.getHours()}}:{{curTime.getMinutes()<10?'0'+curTime.getMinutes():curTime.getMinutes()}}
b)css样式
.timeBox {
display: flex;
align-items: center;
justify-content: flex-end;
flex: 1;
.timeDate {
width: 150px;
padding: 10px 5px;
background-color:$text-green-color;
color: #fff;
.bigFont {
font-size: 20px;
}
}
.timeBox {
color:$text-green-color;
border: 1px solid #ccc;
font-size: 35px;
font-weight: bold;
padding: 9.5px 5px;
}
}c)逻辑
data(){
return {
curTime:new Date()
}
},
filters:{
filterDate(val){
const arr={
'0':'星期天',
'1':'星期一',
'2':'星期二',
'3':'星期三',
'4':'星期四',
'5':'星期五',
'6':'星期六',
}
return arr[val];
}
},
mounted: function () {
let _this=this;
this.$nextTick(function () {
setInterval(()=>{
_this.curTime=new Date();
}, 1000*60);
})
},效果如下：
