倒计时功能如何开发？

版权声明：如要转发，请注明出处，小小喵的微博 https://blog.csdn.net/weixin_42881744/article/details/81736992

前言

我们在开发过程中经常遇到倒计时的功能，那么应该如何开发呢，下面直接放干货

单个倒计时功能

/**
 *  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>

实现效果：

喜欢的给我点个赞，如果我写的有问题，请留言指出，我好修改。