JS实现获取当前时间和倒计时功能，可自定义输出格式(天、时、分、秒)

        倒计时 是项目中经常会遇到的功能开发，这里通过以往经验，定义class类形式，来实现倒计时或当前时间获取功能，仅供参考。

一、定义辅助类函数

/**
 * 补缺
 * @param {*} _val 
 */
const fillZero = _val => {
  return _val<10?'0'+_val:_val;
}

/**
 * 通用格式化工具
 * @param _dateStr 时间字符串或时间戳
 * @param _format 格式化符串
 */
const formatDate = (_dateStr, _format) => {
	_format = 'undefined'===typeof _format||!_format?'YYYY-MM-DD hh:ii:ss':_format;
	let _date = new Date(_dateStr),
		_values = {
			YYYY: _date.getFullYear(),
			MM: fillZero(_date.getMonth()+1),
			DD: fillZero(_date.getDate()),
			hh: fillZero(_date.getHours()),
			ii: fillZero(_date.getMinutes()),
			ss: fillZero(_date.getSeconds())	
		};
	for(var key in _values) _format = _format.replace(key, _values[key]);
	return _format;
}

二、定义计算倒计时功能函数

/**
 * 计算倒计时，通过parseInt进行计算
 * @param _endTimeStamp 结束时间 时间戳
 * @param _format 格式化字符串
 */
const calculationParseInt = (_endTimeStamp, _format) => {
	_format = 'undefined'===typeof _format||!_format?'hh:ii:ss':_format;
	_endTimeStamp = 'undefined'===typeof _endTimeStamp?new Date().getTime():_endTimeStamp;
	
	let _date = new Date(),
		_currentStamp = _date.getTime(),
		_cha = (_endTimeStamp - _currentStamp) / 1000;
			
	if(_cha<=0){
		return null;
	}
	
	let _values = {
			DD: parseInt(_cha / 60 / 60 / 24, 10),
			hh: fillZero(parseInt(_cha / 60 / 60 % 24, 10)),
			ii: fillZero(parseInt(_cha / 60 % 60, 10)),
			ss: fillZero(parseInt(_cha % 60, 10))
		};
	for(var key in _values) _format = _format.replace(key, _values[key]);
	return _format;
}

三、定义Timer类

/**
 * 定时器
 */
class Timer {
	/**
	 * 构造函数
	 */
    constructor(){
		this.handle = null;
		this.delay = 1000;
	}
	/**
	 * 停止计时
	 */
	stop(){
		clearInterval(this.handle);
	}	
	/**
	 * 获取当前时间
	 * @param _format 日期输出格式
	 */
	getCurrentDate(_format){
		return formatDate(new Date().getTime(), _format);
	}
		
	/**
	 * 开始实时返回当前时间
	 * @param {funciton} _callback 回调函数
     * @param {Object} _params 参数集
	 * 						delay 延迟时间
	 * 						format 日期输出格式
	 */
	startDate(_callback, _params){
		_params = Object.assign({
			delay: this.delay,
			format: undefined
		}, _params);
					
        _callback(this.getCurrentDate(_params.format));

		this.handle = setInterval(() => {
			_callback(this.getCurrentDate(_params.format));
		}, _params.delay);
	}
		
	/**
	 * 开始倒计时
	 * @param _timestamp 时间戳（结束时间戳）
	 * @param _callback 回调函数
	 * @param {Object} _params 参数集
	 * 						delay 延迟时间
	 *						format 时间输出格式
	 */
	startCountdown(_timestamp, _callback, _params){		
		_params = Object.assign({
			delay: this.delay,
			format: undefined
		}, _params);
			
		_callback(calculationParseInt(_timestamp, _params));
	
		this.handle = setInterval(() => {
			let _result = calculationParseInt(_timestamp, _params);	
			if(!_result){
				this.stop();
			}
			_callback(_result);
		}, _params.delay);
	}
}

五、执行调用

       5.1 实例化对象

let timer = new Timer();

        5.2 获取当前时间

//开始执行函数，获取当前日期
timer.startDate(res => {
   console.log('res:', res);
});

//6秒后停止执行
setTimeout(() => {
   timer.stop();
}, 6000);

//输出结果
/**
res: 2021-12-27 00:48:55
res: 2021-12-27 00:48:56
res: 2021-12-27 00:48:57
res: 2021-12-27 00:48:58
res: 2021-12-27 00:48:59
res: 2021-12-27 00:49:00
*/

        5.3 获取倒计时

//执行功能函数，获取计时结果
timer.startCountdown(new Date('2021/12/27 12:00').getTime(), res => {
    console.log('res:', res);
})

//6秒后停止执行
setTimeout(() => {
   timer.stop();
}, 6000);

//输出结果
/**
res: 11:05:40
res: 11:05:39
res: 11:05:38
res: 11:05:37
res: 11:05:36
res: 11:05:35
res: 11:05:34
*/

        5.4 修改输出格式

//执行功能函数，获取计时结果
timer.startCountdown(new Date('2021/12/27 12:00').getTime(), res => {
    console.log('res:', res);
}, {
      format: 'hh小时ii分ss秒'
    })

//6秒后停止执行
setTimeout(() => {
   timer.stop();
}, 6000);

//输出结果
/**
res: 11小时05分40秒
res: 11小时05分39秒
res: 11小时05分38秒
res: 11小时05分37秒
res: 11小时05分36秒
res: 11小时05分35秒
res: 11小时05分34秒
*/

        5.5 修改执行间隔时间

//执行功能函数，获取计时结果
timer.startCountdown(new Date('2021/12/27 12:00').getTime(), res => {
    console.log('res:', res);
}, {
      delay: 2000
    })

//6秒后停止执行
setTimeout(() => {
   timer.stop();
}, 6000);

//输出结果
/**
res: 11小时05分40秒
res: 11小时05分38秒
res: 11小时05分36秒
res: 11小时05分34秒
*/

这里暂时介绍这几种计时方法，大家可以提出宝贵意见，希望该功能能给大家带来帮助。

注：使用class类定义时，请确认自己开发环境语法是否支持。