详解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 相关文章推荐
静态页面的值传递(三部曲)
Sep 25 Javascript
JavaScript 一道字符串分解的题目
Aug 03 Javascript
用JavaScript仿PS里的羽化效果代码
Dec 20 Javascript
Extjs4.0设置Ext.data.Store传参的请求方式(默认为GET)
Apr 02 Javascript
纯JS实现根据CSS的class选择DOM
Mar 22 Javascript
PHP7新特性简述
Jun 11 Javascript
利用vue.js实现被选中状态的改变方法
Feb 08 Javascript
JavaScript图片处理与合成总结
Mar 04 Javascript
解决Layui 表格自适应高度的问题
Nov 15 Javascript
Vue 解决路由过渡动画抖动问题(实例详解)
Jan 05 Javascript
vue实现简单瀑布流布局
May 28 Javascript
解决Vue的文本编辑器 vue-quill-editor 小图标样式排布错乱问题
Aug 03 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/04 无线电
phpmyadmin提示The mbstring extension is missing的解决方法
2014/12/17 PHP
Laravel框架验证码类用法实例分析
2019/09/11 PHP
js实现GridView单选效果自动设置交替行、选中行、鼠标移动行背景色
2010/05/27 Javascript
jquery获取input的value问题说明
2010/08/19 Javascript
JS获取页面input控件中所有text控件并追加样式属性
2013/02/25 Javascript
js获取html文件的思路及示例
2013/09/17 Javascript
jquery访问ashx文件示例代码
2014/08/11 Javascript
js与jquery回车提交的方法
2015/02/03 Javascript
Javascript实现Web颜色值转换
2015/02/05 Javascript
浅谈被jQuery抛弃的函数及替代函数
2015/05/03 Javascript
jQuery实现垂直半透明手风琴特效代码分享
2015/08/21 Javascript
js实现的奥运倒计时时钟效果代码
2015/12/09 Javascript
浅析函数声明和函数表达式——函数声明的声明提前
2016/05/03 Javascript
使用Bootstrap + Vue.js实现添加删除数据示例
2017/02/27 Javascript
Vue.js如何实现路由懒加载浅析
2017/08/14 Javascript
Bootstrap 模态框(Modal)带参数传值实例
2017/08/20 Javascript
Vue父子组件双向绑定传值的实现方法
2018/07/31 Javascript
Vue-不允许嵌套式的渲染方法
2018/09/13 Javascript
Vue项目引进ElementUI组件的方法
2018/11/11 Javascript
解决vue打包后刷新页面报错:Unexpected token
2019/08/27 Javascript
Python基于动态规划算法解决01背包问题实例
2017/12/06 Python
python2.7和NLTK安装详细教程
2018/09/19 Python
解决Python plt.savefig 保存图片时一片空白的问题
2019/01/10 Python
python栈的基本定义与使用方法示例【初始化、赋值、入栈、出栈等】
2019/10/24 Python
小学生家长评语集锦
2014/01/30 职场文书
暑期教师培训方案
2014/06/07 职场文书
父亲节活动策划方案
2014/08/24 职场文书
房地产营销活动策划方案
2014/09/15 职场文书
小学优秀学生评语
2014/12/29 职场文书
社区党支部承诺书
2015/04/29 职场文书
部门主管竞聘书
2015/09/15 职场文书
廉洁自律准则学习心得体会
2016/01/13 职场文书
Mysql 设置boolean类型的操作
2021/06/04 MySQL
我去timi了,一起去timi是什么意思?
2022/04/13 杂记
WINDOWS下安装mysql 8.x 的方法图文教程
2022/04/19 MySQL