JS 倒计时方法(可改造)

起因: 写好备用。

代码:

// 直接把方法写在了原型上,通过原型调用
/**
 * 倒计时
 * time_str String  到期时间('2023-11-28 16:50:00')
 * dom_obj  Object  需要显示的倒计时的dom对象
 */
Date.prototype.countdown = function (time_str, dom_obj) {
    let timer = setInterval(function () {
        let remaining = new Date(time_str).getTime() - new Date().getTime();
        if (remaining > 0) {
            // 计算
            let day = Math.floor(remaining / 1000 / 60 / 60 / 24);
            let hour = Math.floor((remaining / 1000 / 60 / 60) % 24);
            let min = Math.floor((remaining / 1000 / 60) % 60);
            let sec = Math.floor((remaining / 1000) % 60);

            // 不需要补零的话,这部分就可以不用了
            day = day < 10 ? "0" + day : day;
            hour = hour < 10 ? "0" + hour : hour;
            min = min < 10 ? "0" + min : min;
            sec = sec < 10 ? "0" + sec : sec;

            dom_obj.innerHTML = `剩余:${day}${hour}小时 ${min}分钟 ${sec}`;
        } else {
            dom_obj.innerHTML = `剩余:0天 0小时 0分钟 0秒`;
            // 关闭计时器
            clearInterval(timer);
        }
    }, 1000);
}

// 获取dom对象,传递到方法中
var div = document.getElementsByTagName('div')[0];
new Date().countdown('2023-11-28 16:50:00', div);

调用方法:

// 获取dom对象
var div = document.getElementsByTagName('div')[0];
// 从原型上调用方法
new Date().countdown('2023-11-28 16:50:00', div);

效果:
JS 倒计时方法(可改造)_第1张图片

你可能感兴趣的:(web前端,javascript,chrome,开发语言)