前言
我们在开发过程中经常遇到倒计时的功能,那么应该如何开发呢,下面直接放干货
单个倒计时功能
/**
* function 倒计时
* 参数:intDiff 时间
* 单位:s 秒
* author miaoyanhui
*/
export function countDown(intDiff,fn) {
let time = setInterval(function() {
//计算出相差天数
let day=Math.floor(intDiff/(24*3600*1000))
//计算出小时数
let leave1=intDiff%(24*3600*1000) //计算天数后剩余的毫秒数
let hour=Math.floor(leave1/(3600*1000))
//计算相差分钟数
let leave2=leave1%(3600*1000) //计算小时数后剩余的毫秒数
let minute=Math.floor(leave2/(60*1000))
//计算相差秒数
let leave3=leave2%(60*1000) //计算分钟数后剩余的毫秒数
let second=Math.round(leave3/1000)
// console.log(" 相差 "+day+"天 "+hour+"小时 "+minute+" 分钟"+second+" 秒")
intDiff-=1000;
if (intDiff <= 0) {
day = 0; hour = 0; minute = 0; second = 0;
clearInterval(time);
}
fn(day,hour,minute,second);
}, 1000);
}
在页面中调用
// 倒计时 48小时 172800
let subtime = endTime-new Date().getTime(); //结束日期减去当前日期,求出还剩多少时间
countDown(subtime,function(day,hour,minute,second){
this.time = {
day:day,
hour:hour>9?hour:"0"+hour,
minute: minute>9?minute:"0"+minute,
second:second>9?second:"0"+second
}
}.bind(this));
html
<center>
<span class="block" v-text="time.hour">00</span>
<span class="icon">:</span>
<span class="block" v-text="time.minute">00</span>
<span class="icon">:</span>
<span class="block" v-text="time.second">00</span>
</center>
实现效果:
多个倒计时功能开发
/**
* function 多个倒计时
* list 时间数组
* fn 回调函数
* time 2018-03-02
* author miaoyanhui
*/
export function timeDown(list,fn){
for(let i in list){
let intDiff = list[i].time;
let time = setInterval(function() {
//计算出相差天数
let day=Math.floor(intDiff/(24*3600*1000))
//计算出小时数
let leave1=intDiff%(24*3600*1000) //计算天数后剩余的毫秒数
let hour=Math.floor(leave1/(3600*1000))
//计算相差分钟数
let leave2=leave1%(3600*1000) //计算小时数后剩余的毫秒数
let minute=Math.floor(leave2/(60*1000))
//计算相差秒数
let leave3=leave2%(60*1000) //计算分钟数后剩余的毫秒数
let second=Math.round(leave3/1000)
// console.log(" 相差 "+day+"天 "+hour+"小时 "+minute+" 分钟"+second+" 秒")
intDiff-=1000;
if (intDiff <= 0) {
day = 0; hour = 0; minute = 0; second = 0;
clearInterval(time);
}
let dateTime;
if(day){
dateTime = day + "天 " + (hour>9?hour:"0"+hour) + ":" + (minute>9?minute:"0"+minute) + ":" + (second>9?second:"0"+second);
}else{
dateTime = (hour>9?hour:"0"+hour) + ":" + (minute>9?minute:"0"+minute) + ":" + (second>9?second:"0"+second);
}
fn(dateTime);
}, 1000);
}
}
页面中调用
timeList.push({time:subTime}); //timeList中存储多个剩余时间
timeDown(timeList,function(dateTime){
this.endTime[i] = dateTime;
}.bind(this));
html
<li v-for="item in endTime">
<span class="grey-time">剩余
<span v-text="item==''?'00:00:00':item"></span>
</span>
</li>
实现效果:
喜欢的给我点个赞,如果我写的有问题,请留言指出,我好修改。