详解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 相关文章推荐
Three.js源码阅读笔记(光照部分)
Dec 27 Javascript
再谈JavaScript线程
Jul 10 Javascript
jQuery与getJson结合的用法实例
Aug 07 Javascript
jQuery超酷平面式时钟效果代码分享
Mar 30 Javascript
jQuery树控件zTree使用方法详解(一)
Feb 28 Javascript
vue2的todolist入门小项目的详细解析
May 11 Javascript
React实践之Tree组件的使用方法
Sep 30 Javascript
原生JS获取元素的位置与尺寸实现方法
Oct 18 Javascript
百度地图去掉marker覆盖物或者去掉maker的label文字方法
Jan 26 Javascript
js中split()方法得到的数组长度问题
Jul 19 Javascript
javascript实现简单留言板案例
Feb 09 Javascript
javascript canvas实现雨滴效果
Jun 09 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
PHP Array交叉表实现代码
2010/08/05 PHP
在win7中搭建Linux+PHP 开发环境
2014/10/08 PHP
php操作xml入门之xml标签的属性分析
2015/01/23 PHP
Yii2 中实现单点登录的方法
2018/03/09 PHP
php实现支付宝当面付(扫码支付)功能
2018/05/30 PHP
PHP实现财务审核通过后返现金额到客户的功能
2019/07/04 PHP
淘宝搜索框效果实现分析
2011/03/05 Javascript
jQuery仿Excel表格编辑功能的实现代码
2013/05/01 Javascript
Jquery Uploadify多文件上传带进度条且传递自己的参数
2013/08/28 Javascript
JQuery操作iframe父页面与子页面的元素与方法(实例讲解)
2013/11/20 Javascript
详解javascript中的事件处理
2015/11/06 Javascript
javascript图片切换综合实例(循环切换、顺序切换)
2016/01/13 Javascript
基于jQuery实现动态搜索显示功能
2016/05/05 Javascript
jQuery Ajax 全局调用封装实例代码详解
2016/06/02 Javascript
JQuery组件基于Bootstrap的DropDownList(完整版)
2016/07/05 Javascript
js实现四舍五入完全保留两位小数的方法
2016/08/02 Javascript
jQuery实现弹出带遮罩层的居中浮动窗口效果
2016/09/12 Javascript
基于ExtJs在页面上window再调用Window的事件处理方法
2017/07/26 Javascript
Javascript 严格模式use strict详解
2017/09/16 Javascript
JS实现图片居中悬浮效果
2017/12/25 Javascript
实例详解BootStrap的动态模态框及静态模态框
2018/08/13 Javascript
微信小程序动态显示项目倒计时
2019/06/20 Javascript
小程序实现投票进度条
2019/11/20 Javascript
Ant Design Pro 下实现文件下载的实现代码
2019/12/03 Javascript
使用python实现ftp的文件读写方法
2019/07/02 Python
Django Docker容器化部署之Django-Docker本地部署
2019/10/09 Python
浅析关于Keras的安装(pycharm)和初步理解
2020/10/23 Python
python实现b站直播自动发送弹幕功能
2021/02/20 Python
python matplotlib工具栏源码探析二之添加、删除内置工具项的案例
2021/02/25 Python
详解CSS3 用border写 空心三角箭头 (两种写法)
2017/09/29 HTML / CSS
css3实现3D文本悬停改变效果的示例代码
2019/01/16 HTML / CSS
HTML5开发动态音频图的实现
2020/07/02 HTML / CSS
幼师自我鉴定
2014/02/01 职场文书
团队精神口号
2014/06/06 职场文书
Go遍历struct,map,slice的实现
2021/06/13 Golang
JS setTimeout与setInterval的区别
2022/04/20 Javascript