详解js中常规日期格式处理、月历渲染和倒计时函数
(编辑：jimmy 日期: 2024/11/18 浏览：3 次 )
前言
相信大家都知道日期格式处理在前端的日常任务中非常常见，但是为此引入monent.js这样的类库又会显得有点臃肿，毕竟我们一个特定的项目中，并不需要monent.js那么全的涵盖范围。另外，如果现在公司让你自己手写一个日历组件（月历、周历），日历组件中需要耦合我们的其他业务需求，如果有一个任务列表，当11月22号的待进行任务，我需要在日历上有一个绿色圆点，表示当天有待办事项。
下面介绍一些常规的函数，希望对大家有用。
月历效果图
函数目录
- getFormatDateStr 获得指定日期格式的字符串；
- getDayPrevAfter 获得n天前/后的日期；
- formatDateWithTimeZone 格式化日期带时区，ISO 8601；
- countDownBySecond 倒计时；
- monthSize 获得指定日期所在月的天数；
- getCalendarMonth 获得指定日期所在月的第一周到第四/五周的数据组合；
- getOneDateWeekIndex 获得指定的某天所在该月的第几周，下标从0开始；
下面是详细的说明：
getFormatDateStr
/**
* [zeroPadding 小于10的数字补0，必填]
* @param {[Int]} value [description]
* @return {[String]} [description]
*/
export function zeroPadding(value){
return value < 10 "htmlcode">
/**
* [getDayPrevAfter 获得n天前/后的日期]
* @param {[String]} date [日期，非必填参数，表示调用时的时间]
* @param {[String]} type [前一天还是后一天，非必填参数，默认后一天]
* @param {[Int]} daysNum [天数，非必填参数，默认一天]
* @return {[Date]} [description]
*/
export function getDayPrevAfter(date, type, daysNum) {
date = date "htmlcode">
/**
* [formatDateWithTimeZone 格式化日期带时区，ISO 8601]
* @param {[Date]} date [日期，非必填参数，表示调用时的时间]
* @return {[String]} [ISO 8601格式的日期，example: 2016-11-21T14:09:15+08:00]
*/
export function formatDateWithTimeZone(date) {
date = date "htmlcode">
/**
* [countDownBySecond 倒计时]
* @param {[Int]} restSeconds [剩余秒数，必填]
* @param {[Int]} timeInterval [时间间隔，非必填，默认1000ms]
* @param {[Function]} func [每倒计时一次，就需要执行一次的回调函数名，非必填]
* @param {[Function]} endFun [倒计时结束需要执行的函数名，非必填]
* @return {[null]} [无返回值]
*/
export function countDownBySecond(restSeconds, timeInterval, func, endCallback) {
let timer = null;
let total = restSeconds;
timeInterval = timeInterval "htmlcode">
/**
* [monthSize 获得指定日期所在月的天数]
* @param {[Date]} oDate [指定的日期，非必填，默认为当天]
* @return {[Int]} [总天数]
*/
function monthSize(oDate) {
oDate = oDate "htmlcode">
/**
* [getCalendarMonth 获得指定日期所在月的第一周到第四/五周的数据组合，形如：
* [{
"date": "2016/10/30", //日期字符串
"dateNum": 30, //日
"isCurMonth": false, //是否当前月
"weekIndex": 0 //是本月的第几周，下标从0开始
},{
"date": "2016/10/31",
"dateNum": 31,
"isCurMonth": false,
"weekIndex": 0
},{
"date": "2016/11/1",
"dateNum": 1,
"day": 2,
"isCurMonth": true,
"isToday": false,
"weekIndex": 0
}]
]
* @param {[Date]} param [指定的日期，非必填，默认为当天]
* @return {[Array]} [获得指定日期所在月的第一周到第四/五周的数据组合]
*/
export function getCalendarMonth(date) {
date = date "htmlcode">
/**
* [getOneDateWeekIndex 获得指定的某天所在该月的第几周，下标从0开始]
* @param {[Date]} date [指定的日期，非必填，默认为当天]
* @return {[Int]} [在该月的第几周]
*/
export function getOneDateWeekIndex(date) {
date = date "color: #ff0000">总结
以上就是这篇文章的全部内容了，用上面的函数就能够实现日期格式转换，倒计时，自定义月历等常规的需要，希望对大家的学习或者工作能有一定的帮助，如果有疑问大家可以留言交流。
上一篇：JavaScript实现经典排序算法之选择排序
下一篇：JavaScript实现经典排序算法之冒泡排序