详解JavaScript时间格式化


Posted in Javascript onDecember 23, 2015

感谢某前辈写的JS格式化日期和时间JS代码,很好很强大!!!

前言:

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
 * blongs: http://www.cnblogs.com/liuyitian/
 */
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毫秒'));

详解JavaScript时间格式化

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

详解JavaScript时间格式化

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

详解JavaScript时间格式化

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

详解JavaScript时间格式化

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

详解JavaScript时间格式化

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

通过以上内容给大家详解了JavaScript时间格式化相关知识,希望大家喜欢。

Javascript 相关文章推荐
JS event使用方法详解
Apr 28 Javascript
JavaScript读取中文cookie时的乱码问题的解决方法
Oct 14 Javascript
Jquery从头学起第四讲 jquery入门教程
Aug 01 Javascript
javascript数组去重的方法汇总
Apr 14 Javascript
JS与jQ读取xml文件的方法
Dec 08 Javascript
vuejs动态组件给子组件传递数据的方法详解
Sep 09 Javascript
vue2.0 axios前后端数据处理实例代码
Jun 30 Javascript
JS+HTML5 FileReader实现文件上传前本地预览功能
Mar 27 Javascript
Vue.js组件间的循环引用方法示例
Dec 27 Javascript
基于jQuery实现的设置文本区域的光标位置
Jun 15 jQuery
ES6 async、await的基本使用方法示例
Jun 06 Javascript
微信小程序用户授权最佳实践指南
May 08 Javascript
FullCalendar日历插件应用之数据展现(一)
Dec 23 #Javascript
js实现图片无缝滚动
Dec 23 #Javascript
使用Function.apply()的参数数组化来提高 JavaScript程序性能的技巧
Dec 23 #Javascript
js判断文本框输入的内容是否为数字
Dec 23 #Javascript
javascript新闻跑马灯实例代码
Jul 29 #Javascript
javascript动态添加checkbox复选框的方法
Dec 23 #Javascript
js仿微博实现统计字符和本地存储功能
Dec 22 #Javascript
You might like
DedeCms模板安装/制作概述
2007/03/11 PHP
php chr() ord()中文截取乱码问题解决方法
2008/09/08 PHP
PHP数字和字符串ID互转函数(类似优酷ID)
2014/06/30 PHP
php异步多线程swoole用法实例
2014/11/14 PHP
PHP文件读取功能的应用实例
2015/05/08 PHP
php查询whois信息的方法
2015/06/08 PHP
详解PHP中的序列化、反序列化操作
2017/03/21 PHP
thinkPHP框架实现类似java过滤器的简单方法示例
2018/09/05 PHP
Nodejs实现的一个静态服务器实例
2014/12/06 NodeJs
简单分析javascript面向对象与原型
2015/05/21 Javascript
window.onload使用指南
2015/09/13 Javascript
让图片跳跃起来  javascript图片轮播特效
2016/02/16 Javascript
JS简单实现DIV相对于浏览器固定位置不变的方法
2016/06/17 Javascript
javascript实现动态显示颜色块的报表效果
2017/04/10 Javascript
Laravel整合Bootstrap 4的完整方案(推荐)
2018/01/25 Javascript
JavaScript实现连连看连线算法
2019/01/05 Javascript
详解vue路由篇(动态路由、路由嵌套)
2019/01/27 Javascript
Nuxt.js 数据双向绑定的实现
2019/02/17 Javascript
[01:01:25]DOTA2上海特级锦标赛B组资格赛#2 Fnatic VS Spirit第三局
2016/02/27 DOTA
Nginx搭建HTTPS服务器和强制使用HTTPS访问的方法
2015/08/16 Python
解决seaborn在pycharm中绘图不出图的问题
2018/05/24 Python
python3+PyQt5 数据库编程--增删改实例
2019/06/17 Python
python实现日志按天分割
2019/07/22 Python
如何在Django配置文件里配置session链接
2019/08/06 Python
python3常用的数据清洗方法(小结)
2019/10/31 Python
Agoda香港:全球特价酒店预订
2017/05/07 全球购物
阿根廷票务网站:StubHub阿根廷
2018/04/13 全球购物
MIRTA官网:手工包,100%意大利制造
2020/02/11 全球购物
助人为乐表扬信范文
2014/01/14 职场文书
先进集体获奖感言
2014/02/13 职场文书
活动策划求职信模板
2014/04/21 职场文书
我心目中的好老师活动方案
2014/08/19 职场文书
学习优秀党务工作者先进事迹材料思想报告
2014/09/17 职场文书
幼儿园教学反思范文
2016/03/02 职场文书
2019新员工试用期转正申请书3篇
2019/08/13 职场文书
关于考试抄袭的检讨书
2019/11/02 职场文书