当前位置: 首页 > article >正文

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);

效果:
在这里插入图片描述


http://www.kler.cn/a/152699.html

相关文章:

  • 27.Spring如何避免在并发下获取不完整的Bean?
  • 有关安科瑞AIM-D100-ES储能用直流绝缘监测仪的功能介绍-安科瑞 蒋静
  • 【快速见刊|投稿优惠】2024年机电一体与自动化技术国际学术会议(IACMAT 2024)
  • ELK分布式日志管理平台部署
  • JVM的小知识总结
  • nvm安装管理nodejs版本
  • C++-设计一个特殊类
  • 【高效开发工具系列】Hutool DateUtil工具类
  • ARM安全架构——为复杂软件提供保护
  • 设计模式:观察者模式
  • es6之class类(未完成)
  • K8s Docker实践三
  • Python开发运维:PyMongo 连接操作 MongoDB
  • 【Openstack Train安装】十二、Cinder安装
  • 力扣每日一题(2023-11-30)
  • drool 7 multiThread 测试
  • java分布式锁分布式锁
  • 鉴源论坛 · 观擎丨民机机载软件的配置管理
  • 【Android MediaCodec 将音频转换为 pcm 格式】
  • ModuleNotFoundError: No module named ‘mdtex2html‘ module已经安装还是报错,怎么办?