详解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遍历表格的实例
Jul 10 Javascript
javascript通过className来获取元素的简单示例代码
Jan 10 Javascript
js上传图片及预览功能实例分析
Apr 24 Javascript
深入理解js函数的作用域与this指向
May 28 Javascript
如何在JS中实现相互转换XML和JSON
Jul 19 Javascript
一篇文章搞定JavaScript类型转换(面试常见)
Jan 21 Javascript
jquery PrintArea 实现票据的套打功能(代码)
Mar 17 Javascript
3种vue组件的书写形式
Nov 29 Javascript
Vue2.0仿饿了么webapp单页面应用详细步骤
Jul 08 Javascript
详解Js里的for…in和for…of的用法
Mar 28 Javascript
Vue学习之常用指令实例详解
Jan 06 Javascript
JS画布动态实现黑客帝国背景效果
Nov 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
全国FM电台频率大全 - 31 新疆维吾尔族自治区
2020/03/11 无线电
php基础知识:类与对象(2) 自动加载对象
2006/12/13 PHP
编写php应用程序实现摘要式身份验证的方法详解
2013/06/08 PHP
linux下php上传文件注意事项
2016/06/11 PHP
php操作xml并将其插入数据库的实现方法
2016/09/08 PHP
三个思路解决laravel上传文件报错:413 Request Entity Too Large问题
2017/11/13 PHP
PHP+ajax实现上传、删除、修改单张图片及后台处理逻辑操作详解
2020/02/12 PHP
JSON.parse 解析字符串出错的解决方法
2010/07/08 Javascript
基于jquery的用鼠标画出可移动的div
2012/09/06 Javascript
js中的referrer返回上一页使用介绍
2013/09/26 Javascript
Javascript浮点数乘积运算出现多位小数的解决方法
2014/02/17 Javascript
基于jQuery Ajax实现上传文件
2016/03/24 Javascript
常用原生JS兼容性写法汇总
2016/04/27 Javascript
给easyui datebox扩展一个清空的实例
2016/11/09 Javascript
livereload工具实现前端可视化开发【推荐】
2016/12/23 Javascript
three.js中文文档学习之如何本地运行详解
2017/11/20 Javascript
vue中如何实现后台管理系统的权限控制的方法示例
2018/09/19 Javascript
微信小程序实现获取准确的腾讯定位地址功能示例
2019/03/27 Javascript
基于javascript的拖拽类封装详解
2019/04/19 Javascript
vue项目打包后提交到git上为什么没有dist这个文件的解决方法
2020/09/16 Javascript
Python实现可设置持续运行时间、线程数及时间间隔的多线程异步post请求功能
2018/01/11 Python
python学习入门细节知识点
2018/03/29 Python
Win10下python 2.7.13 安装配置方法图文教程
2018/09/18 Python
Python开发虚拟环境使用virtualenvwrapper的搭建步骤教程图解
2018/09/19 Python
Python文件操作基础流程解析
2020/03/19 Python
python argparse传入布尔参数false不生效的解决
2020/04/20 Python
把富文本的回车转为br标签
2019/08/09 HTML / CSS
Yves Rocher伊夫·黎雪美国官网:法国始创植物美肌1959
2019/01/09 全球购物
介绍一下SOA和SOA的基本特征
2016/02/24 面试题
职高毕业生自我鉴定
2013/10/21 职场文书
家具商场的活动方案
2014/08/16 职场文书
2014基层党员批评与自我批评范文
2014/09/24 职场文书
个人催款函范文
2015/06/23 职场文书
养成教育工作总结
2015/08/13 职场文书
动画《平凡职业成就世界最强》宣布制作OVA
2022/04/01 日漫
使用CSS实现六边形的图片效果
2022/08/05 HTML / CSS