JavaScript轻量级倒计时插件CountDown.js使用指南

作者:函数茶馆时间:2026-10-22 21:38:51浏览:214

本文介绍轻量级JavaScript倒计时工具CountDown.js。该插件支持按秒数、起止日期或日期加时间三种模式创建倒计时,并提供暂停、恢复及关闭控制。文章详细解析了Ele、Sign、Divider等可选参数及EndFunc回调,通过代码示例展示如何配置DOM元素、时间类型及分隔符,帮助开发者快速集成简单的页面倒计时功能。

CountDown.js插件介绍

CountDown.js

一个用于实现简易页面倒计时的轻量级工具库

API

按秒数倒计时API

CountDown.openTimeCountBySeconds()依据指定的秒数启动倒计时并展示剩余时间

参数说明:

  • Ele: 承载倒计时显示的DOM元素
  • CountDownSeconds: 设定的计时总秒数
  • Sign: 倒计时标识符(支持多倒计时共用同一标识)
  • Divider: 时分秒之间的分隔字符
  • EndFunc: 倒计时结束时的回调函数

注:上述参数均为可选

示例代码


    CountDown.openTimeCountBySeconds({
      Ele: document.getElementById('h1'),
      CountDownSeconds: 3600,
      Sign: 'flypie',
      Divider: ':',
      EndFunc: function () {
        console.log('end');
      }
    });

按起止日期倒计时API

CountDown.openTimeCountByStartAndEndDate()依据起止时间启动倒计时并展示剩余时间

参数说明:

  • Ele: 承载倒计时显示的DOM元素
  • StartDate: 倒计时起始时间(Date类型)
  • EndDate: 倒计时结束时间(Date类型)
  • Sign: 倒计时标识符(支持多倒计时共用同一标识)
  • Divider: 时分秒之间的分隔字符
  • EndFunc: 倒计时结束时的回调函数

注:除StartDate与EndDate外,其余参数均为可选

示例代码


    var startDate = new Date();
    var endDate = new Date();
    endDate.setDate(endDate.getDate()+1);
    CountDown.openTimeCountByStartAndEndDate({
      Ele: document.getElementById('h1'),
      StartDate: startDate,
      EndDate: endDate,
      Sign: 'flypie',
      Divider: ':',
      EndFunc: function () {
        console.log('end');
      }
    });

按日期加时间倒计时API

CountDown.openTimeCountByStartAndEndDate()依据起止时间启动倒计时并展示剩余天数及时间

参数说明:

  • Ele: 承载倒计时显示的DOM元素
  • StartDate: 倒计时起始时间(Date类型)
  • EndDate: 倒计时结束时间(Date类型)
  • Sign: 倒计时标识符(支持多倒计时共用同一标识)
  • Divider: 时分秒之间的分隔字符
  • DateDivider: 天数与时间部分之间的分隔字符
  • EndFunc: 倒计时结束时的回调函数

注:除StartDate与EndDate外,其余参数均为可选

示例代码


    var startDate = new Date();
    var endDate = new Date();
    endDate.setDate(endDate.getDate()+10);
CountDown.openDateAndTimeCountByStartAndEndDate({
      Ele: document.getElementById('h1'),
      StartDate: startDate,
      EndDate: endDate,
      Sign: 'flypie',
      Divider: ':',
      DateDivider: '天 ',
      EndFunc: function () {
        console.log('end');
      }
    });

倒计时控制方法

CountDown.stopBySign()依据标识符临时暂停指定的倒计时


CountDown.stopBySign('flypie');

CountDown.resumeBySign()依据标识符恢复被临时暂停的倒计时


CountDown.resumeBySign('flypie');

CountDown.closeBySign()依据标识符永久关闭指定的倒计时


CountDown.closeBySign('flypie');

总结

本文介绍了上述全部内容,旨在为读者的学习或工作提供参考价值,感谢支持。如需了解更多详情,请参阅相关链接。

作者最新文章