js格式化时间的方法


Posted in Javascript onDecember 18, 2015

本文为大家分享了javascript时间格式化的方法,分享给大家供大家参考,具体内容如下
可以说是Web项目中不可或缺的一个Javascript类库,它可以帮助你快速的解决客户端编程的许多问题,下面贴出一个用js格式化时间的方法。

Date.prototype.format =function(format)
{
var o = {
"M+" : this.getMonth()+1, //month
"d+" : this.getDate(), //day
"h+" : this.getHours(), //hour
"m+" : this.getMinutes(), //minute
"s+" : this.getSeconds(), //second
"q+" : Math.floor((this.getMonth()+3)/3), //quarter
"S" : this.getMilliseconds() //millisecond
}
if(/(y+)/.test(format)) format=format.replace(RegExp.$1,
(this.getFullYear()+"").substr(4- RegExp.$1.length));
for(var k in o)if(new RegExp("("+ k +")").test(format))
format = format.replace(RegExp.$1,
RegExp.$1.length==1? o[k] :
("00"+ o[k]).substr((""+ o[k]).length));
return format;
}

以上代码必须先声明,然后在使用。使用方法:

var d =new Date().format('yyyy-MM-dd');

另一种方法:

在Javascript之中,日期对象是Date,那么如何将一个日期对象按照定制的格式进行输出呢?
  可以现告诉你,Date对象有有四个内置方法,用于输出为字符串格式,分别为: 

  •   1)toGMTString,将一个日期按照GMT格式显示
  •   2)toLocaleString,将一个日期按照本地操作系统格式显示
  •   3)toLocaleDateString,按照本地格式显示一个日期对象的日期部分
  •   4)toLocaleTimeString,按照本地格式显示一个日期对象的时间部分 

  尽管Javascript的Date对象中内置提供了这些输出为字符串的方法,但是这些字符串不是我们来控制格式的,因此如果我们需要我们自己定制的特殊格式,那么又该怎么办呢?
  不用着急,JsJava中提供了专用的类,专门对日期进行指定格式的字符串输出,你可以下载JsJava-2.0.zip,引入其中的src/jsjava/text/DateFormat.js,或者直接引入jslib/jsjava-2.0.js,样例代码如下:

var df=new SimpleDateFormat();//jsJava1.0需要使用DateFormat对象,不要弄错就是了 
df.applyPattern("yyyy-MM-dd HH:mm:ss"); 
var date=new Date(2015,12,18,10,59,51); 
var str=df.format(date); 
document.write(str);//显示结果为:2015-12-18 10:59:51

通过上面的例子你可以看出,你需要做的就是指定pattern,那么pattern中yyyy、MM等都表示什么意思呢?如果你学习过Java的日期格式化,那么你应该知道,那都是占位符,这些占位符都具有特殊的函数,例如y表示年,yyyy表示四个数字的年份,例如1982,下面列举一些pattern中支持的特殊字符及其含义(下面表格引自Java的官方文档,做了适当修改):

G Era designator [url=]Text[/url] AD 
y Year [url=]Year[/url] 1996; 96 
M Month in year [url=]Month[/url] July; Jul; 07 
w Week in year [url=]Number[/url] 27 
W Week in month [url=]Number[/url] 2 
D Day in year [url=]Number[/url] 189 
d Day in month [url=]Number[/url] 10 
F Day of week in month [url=]Number[/url] 2 
E Day in week [url=]Text[/url] Tuesday; Tue 
a Am/pm marker [url=]Text[/url] PM 
H Hour in day (0-23) [url=]Number[/url] 0 
k Hour in day (1-24) [url=]Number[/url] 24 
K Hour in am/pm (0-11) [url=]Number[/url] 0 
h Hour in am/pm (1-12) [url=]Number[/url] 12 
m Minute in hour [url=]Number[/url] 30 
s Second in minute [url=]Number[/url] 55 
S Millisecond [url=]Number[/url] 978

还有三种方法也分享给大家:

第一种方法:

// 对Date的扩展,将 Date 转化为指定格式的String  
// 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符,  
// 年(y)可以用 1-4 个占位符,毫秒(S)只能用 1 个占位符(是 1-3 位的数字)  
// 例子:  
// (new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423  
// (new Date()).Format("yyyy-M-d h:m:s.S")   ==> 2006-7-2 8:9:4.18  
Date.prototype.Format = function(fmt)  
{ //author: meizz  
 var o = {  
  "M+" : this.getMonth()+1,         //月份  
  "d+" : this.getDate(),          //日  
  "h+" : this.getHours(),          //小时  
  "m+" : this.getMinutes(),         //分  
  "s+" : this.getSeconds(),         //秒  
  "q+" : Math.floor((this.getMonth()+3)/3), //季度  
  "S" : this.getMilliseconds()       //毫秒  
 };  
 if(/(y+)/.test(fmt))  
  fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));  
 for(var k in o)  
  if(new RegExp("("+ k +")").test(fmt))  
 fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));  
 return fmt;  
}

调用方法:

var time1 = new Date().format("yyyy-MM-dd HH:mm:ss");    
var time2 = new Date().format("yyyy-MM-dd");

第二种方法:

<mce:script language="javascript" type="text/javascript"><!--
   
/**   
 * 对Date的扩展,将 Date 转化为指定格式的String   
 * 月(M)、日(d)、12小时(h)、24小时(H)、分(m)、秒(s)、周(E)、季度(q) 可以用 1-2 个占位符   
 * 年(y)可以用 1-4 个占位符,毫秒(S)只能用 1 个占位符(是 1-3 位的数字)   
 * eg:   
 * (new Date()).pattern("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423   
 * (new Date()).pattern("yyyy-MM-dd E HH:mm:ss") ==> 2009-03-10 二 20:09:04   
 * (new Date()).pattern("yyyy-MM-dd EE hh:mm:ss") ==> 2009-03-10 周二 08:09:04   
 * (new Date()).pattern("yyyy-MM-dd EEE hh:mm:ss") ==> 2009-03-10 星期二 08:09:04   
 * (new Date()).pattern("yyyy-M-d h:m:s.S") ==> 2006-7-2 8:9:4.18   
 */    
Date.prototype.pattern=function(fmt) {     
  var o = {     
  "M+" : this.getMonth()+1, //月份     
  "d+" : this.getDate(), //日     
  "h+" : this.getHours()%12 == 0 ? 12 : this.getHours()%12, //小时     
  "H+" : this.getHours(), //小时     
  "m+" : this.getMinutes(), //分     
  "s+" : this.getSeconds(), //秒     
  "q+" : Math.floor((this.getMonth()+3)/3), //季度     
  "S" : this.getMilliseconds() //毫秒     
  };     
  var week = {     
  "0" : "/u65e5",     
  "1" : "/u4e00",     
  "2" : "/u4e8c",     
  "3" : "/u4e09",     
  "4" : "/u56db",     
  "5" : "/u4e94",     
  "6" : "/u516d"    
  };     
  if(/(y+)/.test(fmt)){     
    fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));     
  }     
  if(/(E+)/.test(fmt)){     
    fmt=fmt.replace(RegExp.$1, ((RegExp.$1.length>1) ? (RegExp.$1.length>2 ? "/u661f/u671f" : "/u5468") : "")+week[this.getDay()+""]);     
  }     
  for(var k in o){     
    if(new RegExp("("+ k +")").test(fmt)){     
      fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));     
    }     
  }     
  return fmt;     
}    
   
var date = new Date();   
window.alert(date.pattern("yyyy-MM-dd hh:mm:ss"));
// --></mce:script>

 第三种方法:

Date.prototype.format = function(mask) {   
   
  var d = this;   
   
  var zeroize = function (value, length) {   
   
    if (!length) length = 2;   
   
    value = String(value);   
   
    for (var i = 0, zeros = ''; i < (length - value.length); i++) {   
   
      zeros += '0';   
   
    }   
   
    return zeros + value;   
   
  };    
   
  return mask.replace(/"[^"]*"|'[^']*'|/b(?:d{1,4}|m{1,4}|yy(?:yy)?|([hHMstT])/1?|[lLZ])/b/g, function($0) {   
   
    switch($0) {   
   
      case 'd':  return d.getDate();   
   
      case 'dd': return zeroize(d.getDate());   
   
      case 'ddd': return ['Sun','Mon','Tue','Wed','Thr','Fri','Sat'][d.getDay()];   
   
      case 'dddd':  return ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'][d.getDay()];   
   
      case 'M':  return d.getMonth() + 1;   
   
      case 'MM': return zeroize(d.getMonth() + 1);   
   
      case 'MMM': return ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'][d.getMonth()];   
   
      case 'MMMM':  return ['January','February','March','April','May','June','July','August','September','October','November','December'][d.getMonth()];   
   
      case 'yy': return String(d.getFullYear()).substr(2);   
   
      case 'yyyy':  return d.getFullYear();   
   
      case 'h':  return d.getHours() % 12 || 12;   
   
      case 'hh': return zeroize(d.getHours() % 12 || 12);   
   
      case 'H':  return d.getHours();   
   
      case 'HH': return zeroize(d.getHours());   
   
      case 'm':  return d.getMinutes();   
   
      case 'mm': return zeroize(d.getMinutes());   
   
      case 's':  return d.getSeconds();   
   
      case 'ss': return zeroize(d.getSeconds());   
   
      case 'l':  return zeroize(d.getMilliseconds(), 3);   
   
      case 'L':  var m = d.getMilliseconds();   
   
          if (m > 99) m = Math.round(m / 10);   
   
          return zeroize(m);   
   
      case 'tt': return d.getHours() < 12 ? 'am' : 'pm';   
   
      case 'TT': return d.getHours() < 12 ? 'AM' : 'PM';   
   
      case 'Z':  return d.toUTCString().match(/[A-Z]+$/);   
   
      // Return quoted strings with the surrounding quotes removed   
   
      default:  return $0.substr(1, $0.length - 2);   
   
    }   
   
  });   
   
};

方法一多了,就不知道如何选择了,不过还是要靠大家仔细学习研究,针对不同问题选择解决方法,希望大家喜欢这篇文章。

Javascript 相关文章推荐
JavaScript与DropDownList 区别分析
Jan 01 Javascript
几个比较实用的JavaScript 测试及效验工具
Apr 18 Javascript
js 小数取整的函数
May 10 Javascript
关于event.cancelBubble和event.stopPropagation()的区别介绍
Dec 11 Javascript
jQuery简单实现遍历数组的方法
Apr 14 Javascript
理解和运用JavaScript的闭包机制
Aug 13 Javascript
Jquery中map函数的用法
Jun 03 Javascript
js注入 黑客之路必备!
Sep 14 Javascript
原生node.js案例--前后台交互
Feb 20 Javascript
JavaScript中双向数据绑定详解
May 03 Javascript
element 结合vue 在表单验证时有值却提示错误的解决办法
Jan 22 Javascript
每天学点Vue源码之vm.$mount挂载函数
Mar 11 Javascript
谈谈我对JavaScript DOM事件的理解
Dec 18 #Javascript
JavaScript中字符串与Unicode编码互相转换的实现方法
Dec 18 #Javascript
jQuery Validation PlugIn的使用方法详解
Dec 18 #Javascript
最简单的JavaScript图片轮播代码(两种方法)
Dec 18 #Javascript
JS弹出对话框实现方法(三种方式)
Dec 18 #Javascript
jQuery Validate表单验证深入学习
Dec 18 #Javascript
JavaScript计划任务后台运行的方法
Dec 18 #Javascript
You might like
jq的get传参数在utf-8中乱码问题的解决php版
2008/07/23 PHP
php检测网页是否被百度收录的函数代码
2013/10/09 PHP
使用YUI+Ant 实现JS CSS压缩
2014/09/02 PHP
ThinkPHP模版引擎之变量输出详解
2014/12/05 PHP
PHP实现微信申请退款功能
2018/10/01 PHP
JQuery CSS样式控制 学习笔记
2009/07/23 Javascript
JS 实现Table相同行的单元格自动合并示例代码
2013/08/27 Javascript
Jquery使用Firefox FireBug插件调试Ajax步骤讲解
2013/12/02 Javascript
Javascript中的作用域和上下文深入理解
2015/07/03 Javascript
Seajs 简易文档 提供简单、极致的模块化开发体验
2016/04/13 Javascript
实例讲解JavaScript的Backbone.js框架中的View视图
2016/05/05 Javascript
Javascript基础知识盲点总结之函数
2016/05/15 Javascript
PhotoSwipe异步动态加载图片方法
2016/08/25 Javascript
jQuery联动日历的实例解析
2016/12/02 Javascript
微信小程序 常见问题总结(4058,40013)及解决办法
2017/01/11 Javascript
详解vue中点击空白处隐藏div的实现(用指令实现)
2018/04/19 Javascript
JavaScript数组,JSON对象实现动态添加、修改、删除功能示例
2018/05/26 Javascript
解决Layui数据表格中checkbox位置不居中的方法
2018/08/15 Javascript
解决Vue+Element ui开发中碰到的IE问题
2018/09/03 Javascript
基于js判断浏览器是否支持webGL
2020/04/18 Javascript
解决微信授权成功后点击按返回键出现空白页和报错的问题
2020/06/08 Javascript
Python是编译运行的验证方法
2015/01/30 Python
Django查找网站项目根目录和对正则表达式的支持
2015/07/15 Python
Python如何判断数独是否合法
2016/09/08 Python
TensorFlow 模型载入方法汇总(小结)
2018/06/19 Python
CSS3实现头像旋转效果
2017/03/13 HTML / CSS
CSS3 文字动画效果
2020/11/12 HTML / CSS
html5开发之viewport使用
2013/10/17 HTML / CSS
HTML5 history新特性pushState、replaceState及两者的区别
2015/12/26 HTML / CSS
意大利领先的线上奢侈品销售电商:Eleonora Bonucci
2017/10/17 全球购物
物流专业大学生的自我鉴定
2013/11/13 职场文书
专业销售业务员求职信
2013/11/18 职场文书
2014年创卫实施方案
2014/02/18 职场文书
村居抓节水倡议书
2014/05/19 职场文书
乡文化站暑期培训方案
2014/08/28 职场文书
Nginx动静分离配置实现与说明
2022/04/07 Servers