JavaScript如何格式化时间的方法

本文为大家分享了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;
}

登录后复制

1

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

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

另一种方法:

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

  1)toGMTString,将一个日期按照GMT格式显示

  2)toLocaleString,将一个日期按照本地操作系统格式显示

立即学习“Java免费学习笔记(深入)”;

  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

登录后复制

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

登录后复制

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

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

第一种方法:

// 对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");

登录后复制

第二种方法:

<!--

/**
* 对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"));
// -->

登录后复制

 第三种方法: 

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     
      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()     
      case 'TT': return d.getHours()     
      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如何格式化时间的方法的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2781529.html

(0)
上一篇 2025年3月8日 16:18:45
下一篇 2025年2月21日 10:37:28

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • JS计算日期时间差

    这次给大家带来js计算日期时间差,js计算日期时间差的注意事项有哪些,下面就是实战案例,一起来看一下。 js判断日期时间的代码如下所示: alert(GetDateDiff(“2018-02-27 19:20:22”,”2018-02-27…

    编程技术 2025年3月8日
    200
  • vue中使用cropperjs

    这次给大家带来vue中如何使用cropperjs,vue中使用cropperjs的注意事项有哪些,下面就是实战案例,一起来看一下。 用vue的项目里需要对图片进行裁剪,于是使用了cropperjs,在使用的过程中也踩过一些坑,以下是在.vu…

    2025年3月8日
    200
  • js怎么做出撤销重做功能

    这次给大家带来js怎么做出撤销重做功能,js做出撤销重做功能的注意事项有哪些,下面就是实战案例,一起来看一下。 浏览器的功能越来越强大,许多原来由其他客户端提供的功能渐渐转移到了前端,前端应用也越来越复杂。许多前端应用,尤其是一些在线编辑软…

    2025年3月8日
    200
  • JS脚本加载后再执行相应回调函数的操作

    这次给大家带来JS脚本加载后再执行相应回调函数的操作,JS脚本加载后再执行相应回调函数的注意事项有哪些,下面就是实战案例,一起来看一下。 项目中经常会遇到这样的问题:当某个 js 脚本加载完成后再执行相应任务,但很多朋友可能并不知道怎么判断…

    编程技术 2025年3月8日
    200
  • JS怎样操作改变radio的状态

    这次给大家带来JS怎样操作改变radio的状态,JS操作改变radio的状态的注意事项有哪些,下面就是实战案例,一起来看一下。 h5的radio是自带选中状态改变的,但是如果自带的状态无法满足自己的需求时,就需要自己去实现。 代码如下: h…

    2025年3月8日 编程技术
    200
  • JS做到复制内容到剪贴板

    这次给大家带来JS做到复制内容到剪贴板,JS做到复制内容到剪贴板的注意事项有哪些,下面就是实战案例,一起来看一下。 常见方法 查了一下万能的Google,现在常见的方法主要是以下两种: 第三方库:clipboard.js原生方法:docum…

    2025年3月8日
    200
  • ExtJs整合的Echarts

    这次给大家带来ExtJs整合的Echarts,使用ExtJs整合Echarts的注意事项有哪些,下面就是实战案例,一起来看一下。 由于Echarts不提供表格功能,想要实现上图下表,需要自己增加一个table标签。 ExtJs整合Echar…

    编程技术 2025年3月8日
    200
  • D3.js 绘制动态进度条

    这次给大家带来D3.js 绘制动态进度条,D3.js 绘制动态进度条的注意事项有哪些,下面就是实战案例,一起来看一下。 D3 是什么 D3 的全称是(Data-Driven Documents),顾名思义可以知道是一个被数据驱动的文档。听名…

    2025年3月8日 编程技术
    200
  • JS中的Array filter() 方法如何使用

    这次给大家带来JS中的Array filter() 方法如何使用,使用JS中的Array filter()方法的注意事项有哪些,下面就是实战案例,一起来看一下。 什么是稀疏数组     数组元素的索引不一定要连续的,它们之间可以有空缺。每个…

    编程技术 2025年3月8日
    200
  • JS做出均匀的抛物线动画

    这次给大家带来JS做出均匀的抛物线动画,JS做出均匀的抛物线动画的注意事项有哪些,下面就是实战案例,一起来看一下。 在做无人便利小程序的项目中,某一天产品说要像某产商产品学习,给添加购物车增加抛物线小球动画。好吧,产品你最大,做! 先给大家…

    2025年3月8日
    200

发表回复

登录后才能评论