详解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实现你值得拥有
Sep 22 Javascript
jQuery判断checkbox是否选中的小例子
Dec 02 Javascript
在IE8上JS实现combobox支持拼音检索功能
May 23 Javascript
bootstrap模态框跳转到当前模板页面 框消失了而背景存在问题的解决方法
Nov 30 Javascript
JS实现经典的中国地区三级联动下拉菜单功能实例【测试可用】
Jun 06 Javascript
js使用xml数据载体实现城市省份二级联动效果
Nov 08 Javascript
深入理解 webpack 文件打包机制(小结)
Jan 08 Javascript
详解javascript 正则表达式之分组与前瞻匹配
May 30 Javascript
ztree加载完成后显示勾选节点的实现代码
Oct 22 Javascript
js中位数不足自动补位扩展padLeft、padRight实现代码
Apr 06 Javascript
ES2020系列之空值合并运算符 '??'
Jul 22 Javascript
Element Notification通知的实现示例
Jul 27 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
长波知识介绍
2021/03/01 无线电
Thinkphp中Create方法深入探究
2014/06/16 PHP
PHP在线调试执行的实现方法(附demo源码)
2016/04/28 PHP
PHP使用mysqli同时执行多条sql查询语句的实例
2019/03/22 PHP
javascript iframe中打开文件,并检测iframe存在否
2008/12/28 Javascript
JavaScript在IE和Firefox(火狐)的不兼容问题解决方法小结
2010/04/13 Javascript
js对象关系图 方便dom操作
2012/03/18 Javascript
jquery序列化form表单使用ajax提交后处理返回的json数据
2014/03/03 Javascript
Js为表单动态添加节点内容的方法
2015/02/10 Javascript
JQuery和HTML5 Canvas实现弹幕效果
2017/01/04 Javascript
Bootstrap面板使用方法
2017/01/16 Javascript
ES6新特性之Object的变化分析
2017/03/31 Javascript
layui: layer.open加载窗体时出现遮罩层的解决方法
2019/09/26 Javascript
vue-cli3 取消eslint校验代码的解决办法
2020/01/16 Javascript
javascript canvas封装动态时钟
2020/09/30 Javascript
打印出python 当前全局变量和入口参数的所有属性
2009/07/01 Python
Python线性方程组求解运算示例
2018/01/17 Python
python修改txt文件中的某一项方法
2018/12/29 Python
详解Python logging调用Logger.info方法的处理过程
2019/02/12 Python
python 计算数据偏差和峰度的方法
2019/06/29 Python
pytorch索引查找 index_select的例子
2019/08/18 Python
虚拟机下载python是否需要联网
2020/07/27 Python
python Selenium 库的使用技巧
2020/10/16 Python
css3动画 小球滚动 js控制动画暂停
2019/11/29 HTML / CSS
Genny意大利官网:意大利高级时装品牌
2020/04/15 全球购物
应届生学校辅导员求职信
2013/11/07 职场文书
档案检查欢迎词
2014/01/13 职场文书
投标承诺书怎么写
2014/05/24 职场文书
团队激励口号
2014/06/06 职场文书
党员民主生活会整改措施
2014/09/26 职场文书
群众路线自我剖析材料
2014/10/08 职场文书
超市食品安全承诺书
2015/04/29 职场文书
房产电话营销开场白
2015/05/29 职场文书
2016新年晚会开场白
2015/12/03 职场文书
详细谈谈MYSQL中的COLLATE是什么
2021/06/11 MySQL
Vue项目打包、合并及压缩优化网页响应速度
2021/07/07 Vue.js