网络编程

详解js中常规日期格式处理、月历渲染和倒计时函数
网络编程 2025/10/27 佚名
3 2

前言

相信大家都知道日期格式处理在前端的日常任务中非常常见，但是为此引入monent.js这样的类库又会显得有点臃肿，毕竟我们一个特定的项目中，并不需要monent.js那么全的涵盖范围。另外，如果现在公司让你自己手写一个日历组件（月历、周历），日历组件中需要耦合我们的其他业务需求，如果有一个任务列表，当11月22号的待进行任务，我需要在日历上有一个绿色圆点，表示当天有待办事项。

下面介绍一些常规的函数，希望对大家有用。

月历效果图

详解js中常规日期格式处理、月历渲染和倒计时函数

函数目录

  1. getFormatDateStr 获得指定日期格式的字符串；
  2. getDayPrevAfter 获得n天前/后的日期；
  3. formatDateWithTimeZone 格式化日期带时区，ISO 8601；
  4. countDownBySecond 倒计时；
  5. monthSize 获得指定日期所在月的天数；
  6. getCalendarMonth 获得指定日期所在月的第一周到第四/五周的数据组合；
  7. 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">总结


以上就是这篇文章的全部内容了，用上面的函数就能够实现日期格式转换，倒计时，自定义月历等常规的需要，希望对大家的学习或者工作能有一定的帮助，如果有疑问大家可以留言交流。




                                

                                

                                     

                                

                                    标签：
                                        
js处理日期格式,js处理日期格式,js,月历

                                     

                            

                        

                        

                            

                                免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！
                                如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
                            

                        

                        

                            
                            
                        

                        
                        
白云城资源网 Copyright www.dyhadc.com

                        
                        
                    

                    

                        

                            

                                

                                    

                                        

                                    

                                    

                                        

                                            
                                        

                                    

                                

                                

                                    
www.dyhadc.com
                                            
                                                白云城资源网 
                                    

                                    

                                        

                                            
                                        

                                        

                                            
                                        

                                        

                                            
                                        

                                        

                                            
                                        

                                    

                                    

                                    

                                        

                                            129,905影音资源
                                        

                                        

                                            244,626技术资源
                                        

                                        

                                            111,817软件资源
                                        

                                        

                                            578,645站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 更多链接
白云城资源网 Copyright www.dyhadc.com