js 倒计时案例

需求:

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

效果:

代码:

不想打字, 凑合着点看

/**
 * 计时器
 * @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

 

 

 

 

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值