js时间日期格式化封装函数


Posted in Javascript onDecember 02, 2014

js虽然提供了各种获取时间Date对象的不同属性方法,如:getDate 方法 | getDay 方法 | getFullYear 方法 | getHours 方法 ... ... 等等,但是却没有像java那样提供一个方法来供用户来根据自身提供的模板(pattern),来格式化指定时间对象,所以自己就封装了一个小方法,只供大家闲来调侃-.-,有好的建议还望慷慨指荐哦。

用到知识点:

 arguments:该对象代表正在执行的函数和调用它的函数的参数。不可显式创建,虽然有length属性,且能像数组一样以“[]”语法方式取值,但它并不是一个数组。 typeof object :运算符,返回一个用来表示表达式的数据类型的字符串。六种可能: "number," "string," "boolean," "object," "function," 和 "undefined."。 object.constructor:表示创建对象的函数。object必须是对象或函数的名称。基础数据没有该属性。 exec 方法:用正则表达式模式在字符串中运行查找,并返回包含该查找结果的一个数组。没有找到匹配,则它返回 null。数组中同类型匹配元素不会重复出现。 str.split(Rex|str):以一个正则对象或子字符串,将一个字符串分割为子字符串,然后将结果作为字符串数组返回。 throw Error('msg'):抛出一个带有Message信息的Error。throw 后面可跟任何表达式。 还有一些for..in用法,三目运算符,substr这些就不讲了,比较简单。

代码片段:

/**

 * ***js时间日期格式化*** <br>

 * <p>

 * 模版字符串采用严谨格式,超出则会抛出异常,且每类格式只可出现一次,如:yyyy-mm-yyyy 格式会抛异常

 * </p>

 * y-年    length: 2/4位 <br>

 * q-季度    length: 1位 <br>

 * M-月    length: 1~2位 <br>

 * d-日    length: 1~2位 <br>

 * H-时    length: 1~2位24小时制,h:12小时制 <br>

 * m-分    length: 1~2位 <br>

 * s-秒    length: 1~2位 <br>

 * S-毫秒 length: 固定1位

 * @param {Date类型对象} date

 * @param {String类型模板字符串} fmt

 * @return 格式化后时间日期字符串

 * @author lyt

 */

function DateFormat(date, fmt){

    if (arguments.length != 2) // 参数个数校验

        throw Error('arguments长度不合法');

    if (!date || (typeof date != 'object') || (d.constructor != Date)) // 参数合法性校验

        throw Error(arguments[0] + ':类型不为Date类型');

    if (/H+/.test(fmt) && /h+/.test(fmt))

        throw Error("小时格式错误,同类型只能连续出现一次!");

    /* 模板参数校验,正则验证方法 */

    var verify = function(Rex ){

        var arr = new RegExp(Rex).exec(fmt); // 获得匹配结果数组

        if (!arr) // 匹配失败返回

            return "";

        if (fmt.split(Rex).length > 2)  // 同一类型间隔出现多次

            throw Error("fmt格式错误:同类型只能连续出现一次!");

        return arr[0];

    };

    /**

     * 提供月、天、时、分、秒通用匹配替换

     * @param {对象o属性key} r

     * @param {r对应正则对象} rex

     **/

    var common = function(r, rex) {

        if(len !=1 && len !=2)

            throw Error("月份格式错误:M只能出现1/2次");

        len == 2 ? fmt=fmt.replace(rex, o[r].length==1 ? "0"+o[r] : o[r]) : fmt=fmt.replace(rex, o[r]);

    }

    var o = { // 数据存储对象

        "y+": date.getFullYear() + "", // 年

        "q+": Math.floor((date.getMonth() + 3) / 3), // 季度

        "M+": date.getMonth() + 1 + "", // 月

        "d+": date.getDate() + "", // 日

        "H+": date.getHours() + "", // 24时

        "h+": date.getHours() + "", // 12时

        "m+": date.getMinutes() + "", // 分

        "s+": date.getSeconds() + "", // 秒

        "S+": date.getMilliseconds() // 毫秒

    }

    for(var r in o) {

        var rex, len, temp;

        rex = new RegExp(r);

        temp = verify(rex); // 匹配所得字符串

        len = temp.length; // 长度

        if(!len || len == 0) 

            continue;

        if(r == "y+") { 

            if(len !=2 && len != 4)

                throw Error("年份格式错误:y只能出现2/4次");

            len == 2 ? fmt=fmt.replace(rex, o[r].substr(2,3)) : fmt=fmt.replace(rex, o[r]);

        } else if(r == "q+") {

            if(len != 1)

                throw Error("季度格式错误:q只能出现1次");

            fmt=fmt.replace(rex, o[r]);

        } else if(r == "h+") {

            if(len !=1 && len !=2)

                throw Error("小时格式错误:h只能出现1/2次");

            var h = (o[r] > 12 ? o[r]-12 : o[r]) + "";

            len == 2 ? fmt=fmt.replace(rex, h.length==1 ? "0"+h : h) : fmt=fmt.replace(rex, h);

        }  else if(r == "S+") {

            if(len != 1) 

                throw Error("毫秒数格式错误:S只能出现1次");

            fmt=fmt.replace(rex, o[r]);

        }else {    // (r=="M+" || r=="d+" || r=="H+" || r=="m+" || r=="s+")

            common(r, rex)

        }  

    }

    return fmt;

}

上几个演示效果,供大家参考:

console.log(DateFormat(new Date(),'yyyy年第q季度M月dd日HH时m分s秒S毫秒'));

js时间日期格式化封装函数

console.log(DateFormat(new Date(),'yyyy年yy第q季度M月dd日HH时m分s秒S毫秒'));

js时间日期格式化封装函数

console.log(DateFormat(new Date(),'yyyy年第q季度M月dd日Hh时m分s秒S毫秒'));

js时间日期格式化封装函数

console.log(DateFormat("我不是时间对象",'yyyy年第q季度M月dd日Hh时m分s秒S毫秒'));

js时间日期格式化封装函数

console.log(DateFormat(new Date(),'yyyy年第q季度MMM月dd日HH时m分s秒S毫秒'));

js时间日期格式化封装函数

其他效果就不一一列举了,感兴趣的可以把代码拷贝下来直接测试就行了,有任何BUG或者有待优化的地方请慷慨指正哦。

以上便是这款非常好用的封装函数的介绍了,是不是很实用呢,小伙伴们可以直接使用到自己的项目中。

Javascript 相关文章推荐
javascript 写类方式之五
Jul 05 Javascript
JSDoc 介绍使用规范JsDoc的使用介绍
Feb 12 Javascript
jQuery中Ajax的load方法详解
Jan 14 Javascript
js生成随机数的过程解析
Nov 24 Javascript
关于微信中a链接无法跳转问题
Aug 02 Javascript
浅谈JavaScript中变量和函数声明的提升
Aug 09 Javascript
AngularJS入门教程之过滤器用法示例
Nov 02 Javascript
详解vue 数据传递的方法
Apr 19 Javascript
移动端如何用下拉刷新的方式实现上拉加载
Dec 10 Javascript
JS实现分页导航效果
Feb 19 Javascript
微信小程序学习总结(五)常见问题实例小结
Jun 04 Javascript
原生JavaScript实现弹幕组件的示例代码
Oct 12 Javascript
JavaScript基础语法、dom操作树及document对象
Dec 02 #Javascript
JavaScript基础知识学习笔记
Dec 02 #Javascript
Js 正则表达式知识汇总
Dec 02 #Javascript
21个JavaScript事件(Events)属性汇总
Dec 02 #Javascript
bootstrap改变按钮加载状态
Dec 01 #Javascript
使用ajax+jqtransform实现动态加载select
Dec 01 #Javascript
Javascript字符串浏览器兼容问题分析
Dec 01 #Javascript
You might like
smarty实例教程
2006/11/19 PHP
PHP中if和or运行效率对比
2014/12/12 PHP
PHP正则获取页面所有图片地址
2016/03/23 PHP
php session的应用详细介绍
2017/03/22 PHP
php+websocket 实现的聊天室功能详解
2020/05/27 PHP
XHTML下,JS浮动代码失效的问题
2009/11/12 Javascript
Jquery优化效率 提升性能解决方案
2010/09/06 Javascript
真正的JQuery.ajax传递中文参数的解决方法
2011/05/28 Javascript
Array.prototype.concat不是通用方法反驳[译]
2012/09/20 Javascript
javascript window.confirm确认 取消对话框实现代码小结
2012/10/21 Javascript
js+JQuery返回顶部功能如何实现
2012/12/03 Javascript
event.currentTarget与event.target的区别介绍
2012/12/31 Javascript
js/jquery获取文本框输入焦点的方法
2014/03/04 Javascript
AngularJS基础 ng-src 指令简单示例
2016/08/03 Javascript
Node.js实现兼容IE789的文件上传进度条
2016/09/02 Javascript
vue系列之动态路由详解【原创】
2017/09/10 Javascript
vue项目中mock.js的使用及基本用法
2019/05/22 Javascript
vue回到顶部监听滚动事件详解
2019/08/02 Javascript
layui 根据后台数据动态创建下拉框并同时默认选中的实例
2019/09/02 Javascript
[02:41]《西雅图我们来了》2015国际邀请赛出征全记录
2015/07/23 DOTA
Python利用多进程将大量数据放入有限内存的教程
2015/04/01 Python
在python中对变量判断是否为None的三种方法总结
2019/01/23 Python
解决pytorch GPU 计算过程中出现内存耗尽的问题
2019/08/19 Python
Anaconda的安装及其环境变量的配置详解
2020/04/22 Python
Python如何爬取b站热门视频并导入Excel
2020/08/10 Python
Python爬取豆瓣数据实现过程解析
2020/10/27 Python
深入理解css属性的选择对动画性能的影响
2016/04/20 HTML / CSS
Farfetch香港官网:汇集全球时尚奢侈品购物平台
2017/11/26 全球购物
JBL加拿大官方商店:扬声器、耳机等
2020/10/23 全球购物
老师推荐信
2013/10/28 职场文书
多媒体编辑专业毕业生推荐信
2013/11/05 职场文书
房地产财务管理制度
2014/02/02 职场文书
户外活动总结范文
2014/04/30 职场文书
小学生节水倡议书
2015/04/29 职场文书
2015年学校减负工作总结
2015/05/19 职场文书
Mysql systemctl start mysqld报错的问题解决
2021/06/03 MySQL