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 mouseover、mouseout停止事件冒泡的解决方案
Apr 07 Javascript
JavaScript 事件对象的实现
Jul 13 Javascript
JS图片浏览组件PhotoLook的公开属性方法介绍和进阶实例代码
Nov 09 Javascript
2则自己编写的jQuery特效分享
Feb 26 Javascript
JS实现从表格中动态删除指定行的方法
Mar 31 Javascript
JS实现添加,替换,删除节点元素的方法
Jun 30 Javascript
javascript特效实现——当前时间和倒计时效果的简单实例
Jul 20 Javascript
jQuery中show与hide方法用法示例
Sep 16 Javascript
js实现带简单弹性运动的导航条
Feb 22 Javascript
JavaScript中清空数组的三种方式
Mar 22 Javascript
基于Vue el-autocomplete 实现类似百度搜索框功能
Oct 25 Javascript
vue移动端使用canvas签名的实现
Jan 15 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
ajax 的post方法实例(带循环)
2011/07/04 PHP
php学习笔记之面向对象编程
2012/12/29 PHP
PHP开发工具ZendStudio下Xdebug工具使用说明详解
2013/11/11 PHP
分享下页面关键字抓取components.arrow.com站点代码
2014/01/30 PHP
PHP数组操作――获取数组最后一个值的方法
2015/04/14 PHP
jQuery实现form表单reset按钮重置清空表单功能
2012/12/18 Javascript
jquery处理json对象
2014/11/03 Javascript
JQ实现新浪游戏首页幻灯片
2015/07/29 Javascript
jquery专业的导航菜单特效代码分享
2015/08/29 Javascript
JS实现自动固定顶部的悬浮菜单栏效果
2015/09/16 Javascript
JavaScript中的继承之类继承
2016/05/01 Javascript
js实现StringBuffer的简单实例
2016/09/02 Javascript
js 奇葩技巧之隐藏代码
2017/08/11 Javascript
Vue中引入样式文件的方法
2017/08/18 Javascript
让bootstrap的carousel支持滑动滚屏的实现代码
2017/11/27 Javascript
VUE 全局变量的几种实现方式
2018/08/22 Javascript
JavaScript作用域链实例详解
2019/01/21 Javascript
nodejs中各种加密算法的实现详解
2019/07/11 NodeJs
vue如何使用外部特殊字体的操作
2020/07/30 Javascript
原生JS实现相邻月份日历
2020/10/13 Javascript
JavaScript中的Proxy对象
2020/11/27 Javascript
python结合selenium获取XX省交通违章数据的实现思路及代码
2016/06/26 Python
Python实现将MySQL数据库表中的数据导出生成csv格式文件的方法
2018/01/11 Python
CentOS7.3编译安装Python3.6.2的方法
2018/01/22 Python
Python字符串、整数、和浮点型数相互转换实例
2018/08/04 Python
python中yield的用法详解——最简单,最清晰的解释
2019/04/04 Python
python内置函数sorted()用法深入分析
2019/10/08 Python
python词云库wordcloud的使用方法与实例详解
2020/02/17 Python
CSS3 选择器 属性选择器介绍
2012/01/21 HTML / CSS
浅析HTML5的WebSocket与服务器推送事件
2016/02/19 HTML / CSS
团日活动总结范文
2014/04/25 职场文书
2015年学校团委工作总结
2015/05/26 职场文书
房贷收入证明范本
2015/06/12 职场文书
小学中队委竞选稿
2015/11/20 职场文书
golang 如何通过反射创建新对象
2021/04/28 Golang
如何利用python实现Simhash算法
2022/06/28 Python