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代码(亲测兼容IE,Firefox,chrome等浏览器)
Nov 18 Javascript
前端轻量级MVC框架CanJS详解
Sep 26 Javascript
jQuery实现仿淘宝带有指示条的图片转动切换效果完整实例
Mar 04 Javascript
JavaScript模拟深蓝vs卡斯帕罗夫的国际象棋对局示例
Apr 22 Javascript
逻辑表达式中与或非的用法详解
Jun 06 Javascript
AngularJS 输入验证详解及实例代码
Jul 28 Javascript
javascript中获取元素标签中间的内容的实现方法
Oct 08 Javascript
深入学习 JavaScript中的函数调用
Mar 23 Javascript
详解Angular路由 ng-route和ui-router的区别
May 22 Javascript
vue一个页面实现音乐播放器的示例
Feb 06 Javascript
关于微信小程序登录的那些事
Jan 08 Javascript
详解express使用vue-router的history踩坑
Jun 05 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模拟HTTP认证
2006/10/09 PHP
简化php模板页面中分页代码的解析
2009/02/06 PHP
php读取文件内容至字符串中,同时去除换行、空行、行首行尾空格(Zjmainstay原创)
2012/07/31 PHP
php使用数组填充下拉列表框的方法
2015/03/31 PHP
详解WordPress中给链接添加查询字符串的方法
2015/12/18 PHP
JavaScript DOM 学习第二章 编辑文本
2010/02/19 Javascript
js 剪切板的用法(clipboardData.setData)与js match函数介绍
2013/11/19 Javascript
FullCalendar日历插件应用之数据展现(一)
2015/12/23 Javascript
AngularJS入门教程之迭代器过滤详解
2016/08/18 Javascript
JS图片放大效果简单实现代码
2016/09/08 Javascript
基于jQuery实现咖啡订单管理简单应用
2017/02/10 Javascript
原生js 封装get ,post, delete 请求的实例
2017/08/11 Javascript
jquery+css实现下拉列表功能
2017/09/03 jQuery
解读vue生成的文件目录结构及说明
2017/11/27 Javascript
JS使用canvas中的measureText方法测量字体宽度示例
2019/02/02 Javascript
Nuxt.js 数据双向绑定的实现
2019/02/17 Javascript
vue element 中的table动态渲染实现(动态表头)
2019/11/21 Javascript
微信小程序聊天功能的示例代码
2020/01/13 Javascript
Javascript实现鼠标移入方向感知
2020/06/24 Javascript
[02:10]2018DOTA2亚洲邀请赛赛前采访-Liquid
2018/04/03 DOTA
Pycharm学习教程(2) 代码风格
2017/05/02 Python
利用Opencv中Houghline方法实现直线检测
2018/02/11 Python
python itsdangerous模块的具体使用方法
2020/02/17 Python
GDAL 矢量属性数据修改方式(python)
2020/03/10 Python
Pycharm内置终端及远程SSH工具的使用教程图文详解
2020/03/19 Python
Python 发送邮件方法总结
2020/08/10 Python
Python读取Excel一列并计算所有对象出现次数的方法
2020/09/04 Python
美国球鞋寄卖网站:Stadium Goods
2018/05/09 全球购物
意大利香水和化妆品购物网站:Parfimo.it
2019/10/06 全球购物
中专自荐信
2013/10/13 职场文书
银行竞聘演讲稿范文
2014/04/23 职场文书
班级文化建设标语
2014/06/23 职场文书
2014党员学习习主席讲话思想汇报
2014/09/15 职场文书
幼儿园见习报告范文
2014/10/30 职场文书
关于职业道德的心得体会
2016/01/18 职场文书
代码复现python目标检测yolo3详解预测
2022/05/06 Python