js 倒计时案例

需求:

    要求实现 给定时间  距离超过24小时 的 剩余时间    ——使用倒计时展示

效果:

js 倒计时案例_第1张图片

代码:

不想打字, 凑合着点看

/**
 * 计时器
 * @param  time 初始时间 单位秒
 * @param  dom 元素
 */
function Timer (time, dom) {
    this.time = time;
    this.dom = dom;
    this.reTime();
}

/**
 * 刷新时间
 */
Timer.prototype.reTime = function () {
    if (this.time > 0) {
        this.time--
    } else {
        // 等于零结束计时
        this.outputTime('00:00:00')
        return
    }

    // 获取时分秒
    let h = parseInt(this.time/3600)
    let m = parseInt((this.time - h*3600) / 60)
    let s = this.time - h*3600 - m*60

    // 格式化
    h < 10 ? h = `0${h}` : ''
    m < 10 ? m = `0${m}` : ''
    s < 10 ? s = `0${s}` : ''

    // 修改元素值
    this.dom.innerHTML = `${h}:${m}:${s}`;

    // 递归
    setTimeout(this.reTime.bind(this), 1000)
}

调用

$(".time").each((i,v)=>{
            let time = $(v).attr("time");                               //获取下单时间 "2019-05-27T21:16:31.000+0000"
            time = time.replace(new RegExp("-","gm"),"/");              // "2019/05/27T21:16:31.000+0000"
            time = time.replace("T"," ").split(".")[0];                 // "2019/05/27 21:16:31"
            time = new Date().getTime() - (new Date(time)).getTime();   //当前时间毫秒数减去下单时间毫秒数 得到差值
            time = new Date(16*60*60*1000).getTime() -  time;           // 16小时的格林时间毫秒数 减去 差值毫秒数 = 剩余毫秒数
            var date = new Date(time);                                  //转换为时间对象
            //将时间 换算为秒
            time = (Number(date.getHours() * 3600) + Number(date.getMinutes() * 60) + Number(date.getSeconds()));
            new Timer(time,v); //创建计时器对象
        });

 

参考:https://blog.csdn.net/qq_41418386/article/details/80697276

 

 

 

 

 

 

你可能感兴趣的:(前端)