效果图
/*
* 单独的倒计时
* 将天数转为小时数
* 时分秒倒计时
* 参数:时间戳,this
* 页面要在data里添加 Areahours,Areaminutes,Areaseconds
*/
function Areacountdown(e,that){
return new Promise((rel,rej)=>{
let date = new Date();
let time = date.getTime();//当前时间
if(e - time > 0){
var lag = (e- time);
//计算出相差天数
var days = Math.floor(lag / (24 * 3600 * 1000));
//计算出小时数
var leave1 = lag % (24 * 3600 * 1000); //计算天数后剩余的毫秒数
var hours = Math.floor(leave1 / (3600 * 1000));
//计算相差分钟数
var leave2 = leave1 % (3600 * 1000); //计算小时数后剩余的毫秒数
var minutes = Math.floor(leave2 / (60 * 1000));
//计算相差秒数
var leave3 = leave2 % (60 * 1000); //计算分钟数后剩余的毫秒数
var seconds = Math.round(leave3 / 1000);
//只有一位数就在前面加0并转为字符串
function part(val){
var lenval = (val + '').length;
if(lenval >= 2){
return val;
}else{
return '0' + val;
}
}
var Areahours = (days*24)+hours; //将天数转成时并加上原有的时
that.Areahours = part(Areahours); //时
that.Areaminutes = part(minutes); //分
that.Areaseconds = part(seconds); //秒
//测试
/* that.Areahours = part(0);
that.Areaminutes = part(0);
that.Areaseconds = part(5); */
var setTime = setInterval(() =>{
var h = parseInt(that.Areahours);
var m = parseInt(that.Areaminutes);
var s = parseInt(that.Areaseconds);
if( h > 0 || m > 0 || s > 0){
if(s > 0){
s -=1;
that.Areaseconds = part(s);
}else{
//分减一,秒加59
if(m > 0){
m -=1;
that.Areaminutes = part(m);
that.Areaseconds = 59;
}else{
//时减一,分加59,秒加59
if(h > 0){
h -=1;
that.Areahours = part(h);
that.Areaminutes = 59;
that.Areaseconds = 59;
}
}
}
}else{
rel();//活动结束回调
console.log('倒计时结束!')
clearInterval(setTime);
}
},1000)
}
})
}
/*
* 多个倒计时
* 参数:时间戳数组(与数据的下标要一一对应),this
* 页面要在数组每一项里添加 Arrdays,Arrhours,Arrminutes,Arrseconds
* 页面存放数据的名字auctionList
*/
function Arrcountdown(arrTime,that){
return new Promise((rel,rej)=>{
let date = new Date();
let time = date.getTime();//当前时间
//只有一位数就在前面加0并转为字符串
function part(val){
var lenval = (val + '').length;
if(lenval >= 2){
return val;
}else{
return '0' + val;
}
}
function difference(e,index){
if(e - time > 0){
var lag = (e- time);
//计算出相差天数
var days = Math.floor(lag / (24 * 3600 * 1000));
//计算出小时数
var leave1 = lag % (24 * 3600 * 1000); //计算天数后剩余的毫秒数
var hours = Math.floor(leave1 / (3600 * 1000));
//计算相差分钟数
var leave2 = leave1 % (3600 * 1000); //计算小时数后剩余的毫秒数
var minutes = Math.floor(leave2 / (60 * 1000));
//计算相差秒数
var leave3 = leave2 % (60 * 1000); //计算分钟数后剩余的毫秒数
var seconds = Math.round(leave3 / 1000);
that.auctionList[index].Arrdays = part(days); //天
that.auctionList[index].Arrhours = part(hours); //时
that.auctionList[index].Arrminutes = part(minutes); //分
that.auctionList[index].Arrseconds = part(seconds); //秒
}else{
console.log('ok')
}
}
for(let i=0;i<arrTime.length;i++){
difference(arrTime[i],i);
}
that.AllSetTime = setInterval(()=>{
for(let q=0;q<arrTime.length;q++){
var d = parseInt(that.auctionList[q].Arrdays);
var h = parseInt(that.auctionList[q].Arrhours);
var m = parseInt(that.auctionList[q].Arrminutes);
var s = parseInt(that.auctionList[q].Arrseconds);
if( d > 0 || h > 0 || m > 0 || s > 0){
if(s > 0){
s -=1;
that.auctionList[q].Arrseconds = part(s);
}else{
//分减一,秒加59
if(m > 0){
m -=1;
that.auctionList[q].Arrminutes = part(m);
that.auctionList[q].Arrseconds = 59;
}else{
//时减一,分加59,秒加59
if(h > 0){
h -=1;
that.auctionList[q].Arrhours = part(h);
that.auctionList[q].Arrminutes = 59;
that.auctionList[q].Arrseconds = 59;
}else{
if(d > 0){
d -=1;
that.auctionList[q].Arrdays = part(d);
that.auctionList[q].Arrhours = 23;
that.auctionList[q].Arrminutes = 59;
that.auctionList[q].Arrseconds = 59;
}
}
}
}
}else{
console.log('该项数据倒计时结束')
}
}
},1000)
})
}
export{
Areacountdown,
Arrcountdown
}
单个倒计时页面使用
import {Areacountdown} from 'xxxx'
export default{
data(){
return{
//封装的倒计时需要的
Areahours:0,//时
Areaminutes:0,//分
Areaseconds:0,//秒
}
},
}
//使用
countDown(){
var time = 1234567000000;//活动结束的时间戳
Areacountdown(time,this)
.then(res =>{
console.log('结束')
})
}
多个倒计时的页面使用
import {Arrcountdown} from 'xxxxxxxx' //引入
data(){
return{
AllSetTime:'',//全页定时器的名字
arrTime:[],//与数据对应的时间戳数组
auctionList:[],//数据
}
}
//拿到数据的方法里
var data = res.data.data;
for(let j=0;j<data.length;j++){
data[j].Arrdays = 0;
data[j].Arrhours = 0;
data[j].Arrminutes = 0;
data[j].Arrseconds = 0;
this.arrTime.push(data[j].time);
}
this.auctionList = data;
clearInterval(this.AllSetTime);
Arrcountdown(this.arrTime,this);