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 相关文章推荐
利用js获取服务器时间的两个简单方法
Jan 08 Javascript
微博@符号的用户名提示效果。(想@到谁?)
Nov 05 Javascript
基于JavaScript 声明全局变量的三种方式详解
May 07 Javascript
jQuery制作仿Mac Lion OS滚动条效果
Feb 10 Javascript
早该知道的7个JavaScript技巧
Jun 21 Javascript
浅析JavaScript函数的调用模式
Aug 10 Javascript
微信小程序日历组件calendar详解及实例
Jun 08 Javascript
Javascript中 toFixed四舍六入方法
Aug 21 Javascript
详解vue-cli本地环境API代理设置和解决跨域
Sep 05 Javascript
JavaScript引用类型RegExp基本用法详解
Aug 09 Javascript
Node.js中package.json中库的版本号(~和^)
Apr 02 Javascript
VUE+node(express)实现前后端分离
Oct 13 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
PHP实现扎金花游戏之大小比赛的方法
2015/03/10 PHP
js实现的日期操作类DateTime函数代码
2010/03/16 Javascript
一款Jquery 分页插件的改造方法(服务器端分页)
2011/07/11 Javascript
解析JavaScript中instanceof对于不同的构造器或许都返回true
2013/12/03 Javascript
js window.open弹出新的网页窗口
2014/01/16 Javascript
Jquery原生态实现表格header头随滚动条滚动而滚动
2014/03/18 Javascript
jQuery中end()方法用法实例
2015/01/08 Javascript
JavaScript弹出新窗口并控制窗口移动到指定位置的方法
2015/04/06 Javascript
JS实现Fisheye效果动感放大菜单代码
2015/10/21 Javascript
跟我学习javascript的执行上下文
2015/11/18 Javascript
js点击返回跳转到指定页面实现过程
2020/08/20 Javascript
jQuery通过deferred对象管理ajax异步
2016/05/20 Javascript
基于jquery实现弹幕效果
2016/09/29 Javascript
jQuery插件HighCharts绘制2D饼图效果示例【附demo源码下载】
2017/03/21 jQuery
微信小程序 页面跳转传值实现代码
2017/07/27 Javascript
微信小程序radio组件使用详解
2018/01/31 Javascript
js实现网页版贪吃蛇游戏
2020/02/22 Javascript
[58:21]DOTA2亚洲邀请赛 4.3 突围赛 Liquid vs VGJ.T 第二场
2018/04/04 DOTA
[01:08:32]DOTA2-DPC中国联赛 正赛 DLG vs PHOENIX BO3 第二场 1月18日
2021/03/11 DOTA
Python实现方便使用的级联进度信息实例
2015/05/05 Python
Python使用minidom读写xml的方法
2015/06/03 Python
python实现支持目录FTP上传下载文件的方法
2015/06/03 Python
python实现基本进制转换的方法
2015/07/11 Python
Python 实现随机数详解及实例代码
2017/04/15 Python
python交互式图形编程实例(二)
2017/11/17 Python
Yahoo-PHP面试题4
2012/05/05 面试题
总经理司机岗位职责
2014/02/06 职场文书
医药类个人求职的自我评价
2014/02/12 职场文书
初中优秀班集体申报材料
2014/05/01 职场文书
公司门卫岗位职责范本
2014/07/08 职场文书
大学生自我评价范文
2015/03/03 职场文书
农村婚礼司仪主持词
2015/06/29 职场文书
python删除csv文件的行列
2021/04/06 Python
MySQL8.0无法启动3534的解决方法
2021/06/03 MySQL
Python实现灰色关联分析与结果可视化的详细代码
2022/03/25 Python
spring注解 @PropertySource配置数据源全流程
2022/03/25 Java/Android