[JavaScript] JavaScript的时间与时区

0 序言

第1章节，原创，主要关注：JS的时间、时区国际化问题
第2章节，主要来自于第1篇参考文献（系对第1章节的基础知识的夯实）

1 JavaScript 时间、时区的国际化（案例）

本案例等同于问题：JavaScript从浏览器根据不同时区获取时间的问题

假定现在有两台Windows笔记本电脑。

Step1 设置操作系统的时区

分别对两台笔记本电脑设置时区为：北京时区、都柏林时区

操作路径：控制面板-时钟和区域-日期和时间-更改时区

一般业务系统的实现思路：

前端/浏览器请求API时提供当地的时间戳（startTimestamp / endTimestamp）；

前端/浏览器请求API后获得返回的时间戳；

再利用JS获取操作系统的时区，进行本地化时区展示

北京时区（不涉及夏令时）

都柏林时区（涉及夏令时）

Step2.1 测验：new Date().getTime() | 结论：不同时区获取的时间戳一致

如下2个时区的时间戳，是由两个人在两台Windows笔记本电脑上人工进行的获取，故毫秒上有一定轻微差距。

北京时区

1695031586299 => 2023-09-18 18:06:26 (UTC+8)

都柏林时区

1695031586234 => 2023-09-18 18:06:26 (UTC+8)

Step2.2 测验：Date.parse(new Date("2023-09-18 00:00:00")) | 结论：不同时区获取的时间(字符串)不一致

北京时区

1694966400000 => 2023-09-18 00:00:00 (北京时区)

都柏林时区

1694991600000 => 2023-09-18 07:00:00 (北京时区)

提一个思考题：为何Step2.2中，北京时区(UTC+8)与都柏林时区(UTC+0)的时差不是8小时，而是7小时？

大家可自行思考，过两天再解答。

2 JavaScript 时间 API

2.1 获取时间戳(毫秒级/13位)

//方法1 
var timestamp = Date.parse(new Date());// 此方式获取的时间戳只是把【毫秒部分】改成【000】显示，因为 new Date() 对象本身只精确到秒
// 1640569738000

//方法2
var timestamp=new Date().getTime()；
// 1640569787716

//方法3
var timestamp = (new Date()).valueOf() 
//1640569936666

2.2 获取时间

var myDate = new Date();
myDate.getYear();  //获取当前年份(2位)
myDate.getFullYear(); //获取完整的年份(4位,1970-????)
myDate.getMonth();  //获取当前月份(0-11,0代表1月)
myDate.getDate();  //获取当前日(1-31)
myDate.getDay();   //获取当前星期X(0-6,0代表星期天)
myDate.getTime();  //获取当前时间(从1970.1.1开始的毫秒数)
myDate.getHours();  //获取当前小时数(0-23)
myDate.getMinutes();  //获取当前分钟数(0-59)
myDate.getSeconds();  //获取当前秒数(0-59)
myDate.getMilliseconds(); //获取当前毫秒数(0-999)
myDate.toLocaleDateString();  //获取当前日期
var mytime=myDate.toLocaleTimeString();  //获取当前时间
myDate.toLocaleString( );  //获取日期与时间

// 获取当前时间戳(以s为单位)
var timestamp = Date.parse(new Date());
timestamp = timestamp / 1000;
//当前时间戳为：1403149534
console.log("当前时间戳为：" + timestamp);

// 获取某个时间格式的时间戳
var stringTime = "2014-07-10 10:21:12";
var timestamp2 = Date.parse(new Date(stringTime));
timestamp2 = timestamp2 / 1000;
//2014-07-10 10:21:12的时间戳为：1404958872 
console.log(stringTime + "的时间戳为：" + timestamp2);

// 将当前时间换成时间格式字符串
var timestamp3 = 1403058804;
var newDate = new Date();
newDate.setTime(timestamp3 * 1000);
// Wed Jun 18 2014 
console.log(newDate.toDateString());
// Wed, 18 Jun 2014 02:33:24 GMT 
console.log(newDate.toGMTString());
// 2014-06-18T02:33:24.000Z
console.log(newDate.toISOString());
// 2014-06-18T02:33:24.000Z 
console.log(newDate.toJSON());
// 2014年6月18日 
console.log(newDate.toLocaleDateString());
// 2014年6月18日 上午10:33:24 
console.log(newDate.toLocaleString());
// 上午10:33:24 
console.log(newDate.toLocaleTimeString());
// Wed Jun 18 2014 10:33:24 GMT+0800 (中国标准时间)
console.log(newDate.toString());
// 10:33:24 GMT+0800 (中国标准时间) 
console.log(newDate.toTimeString());
// Wed, 18 Jun 2014 02:33:24 GMT
console.log(newDate.toUTCString());

2.3 【时间戳】转化为标准的【时间字符串】(YYYY-MM-DD hh:mm:ss)

function timestampToTime(timestamp) {
  var date = new Date(timestamp * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
  var Y = date.getFullYear() + '-';
  var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1):date.getMonth()+1) + '-';
  var D = (date.getDate()< 10 ? '0'+date.getDate():date.getDate())+ ' ';
  var h = (date.getHours() < 10 ? '0'+date.getHours():date.getHours())+ ':';
  var m = (date.getMinutes() < 10 ? '0'+date.getMinutes():date.getMinutes()) + ':';
  var s = date.getSeconds() < 10 ? '0'+date.getSeconds():date.getSeconds();
  return Y+M+D+h+m+s;
}

timestampToTime(1403058804);
console.log(timestampToTime(1403058804));//2020-06-18 10:33:24

2.4 封装的时间格式器

/** 
 * 时间戳格式化函数 
 * @param {string} format 格式 
 * @param {int} timestamp 要格式化的时间 默认为当前时间 
 * @return {string}   格式化的时间字符串 
 */
function date(format, timestamp){ 
 var a, jsdate=((timestamp) ? new Date(timestamp*1000) : new Date()); 
 var pad = function(n, c){ 
  if((n = n + "").length < c){ 
   return new Array(++c - n.length).join("0") + n; 
  } else { 
   return n; 
  } 
 }; 
 var txt_weekdays = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]; 
 var txt_ordin = {1:"st", 2:"nd", 3:"rd", 21:"st", 22:"nd", 23:"rd", 31:"st"}; 
 var txt_months = ["", "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; 
 var f = { 
  // Day 
  d: function(){return pad(f.j(), 2)}, 
  D: function(){return f.l().substr(0,3)}, 
  j: function(){return jsdate.getDate()}, 
  l: function(){return txt_weekdays[f.w()]}, 
  N: function(){return f.w() + 1}, 
  S: function(){return txt_ordin[f.j()] ? txt_ordin[f.j()] : 'th'}, 
  w: function(){return jsdate.getDay()}, 
  z: function(){return (jsdate - new Date(jsdate.getFullYear() + "/1/1")) / 864e5 >> 0}, 
   
  // Week 
  W: function(){ 
   var a = f.z(), b = 364 + f.L() - a; 
   var nd2, nd = (new Date(jsdate.getFullYear() + "/1/1").getDay() || 7) - 1; 
   if(b <= 2 && ((jsdate.getDay() || 7) - 1) <= 2 - b){ 
    return 1; 
   } else{ 
    if(a <= 2 && nd >= 4 && a >= (6 - nd)){ 
     nd2 = new Date(jsdate.getFullYear() - 1 + "/12/31"); 
     return date("W", Math.round(nd2.getTime()/1000)); 
    } else{ 
     return (1 + (nd <= 3 ? ((a + nd) / 7) : (a - (7 - nd)) / 7) >> 0); 
    } 
   } 
  }, 
   
  // Month 
  F: function(){return txt_months[f.n()]}, 
  m: function(){return pad(f.n(), 2)}, 
  M: function(){return f.F().substr(0,3)}, 
  n: function(){return jsdate.getMonth() + 1}, 
  t: function(){ 
   var n; 
   if( (n = jsdate.getMonth() + 1) == 2 ){ 
    return 28 + f.L(); 
   } else{ 
    if( n & 1 && n < 8 || !(n & 1) && n > 7 ){ 
     return 31; 
    } else{ 
     return 30; 
    } 
   } 
  }, 
   
  // Year 
  L: function(){var y = f.Y();return (!(y & 3) && (y % 1e2 || !(y % 4e2))) ? 1 : 0}, 
  //o not supported yet 
  Y: function(){return jsdate.getFullYear()}, 
  y: function(){return (jsdate.getFullYear() + "").slice(2)}, 
   
  // Time 
  a: function(){return jsdate.getHours() > 11 ? "pm" : "am"}, 
  A: function(){return f.a().toUpperCase()}, 
  B: function(){ 
   // peter paul koch: 
   var off = (jsdate.getTimezoneOffset() + 60)*60; 
   var theSeconds = (jsdate.getHours() * 3600) + (jsdate.getMinutes() * 60) + jsdate.getSeconds() + off; 
   var beat = Math.floor(theSeconds/86.4); 
   if (beat > 1000) beat -= 1000; 
   if (beat < 0) beat += 1000; 
   if ((String(beat)).length == 1) beat = "00"+beat; 
   if ((String(beat)).length == 2) beat = "0"+beat; 
   return beat; 
  }, 
  g: function(){return jsdate.getHours() % 12 || 12}, 
  G: function(){return jsdate.getHours()}, 
  h: function(){return pad(f.g(), 2)}, 
  H: function(){return pad(jsdate.getHours(), 2)}, 
  i: function(){return pad(jsdate.getMinutes(), 2)}, 
  s: function(){return pad(jsdate.getSeconds(), 2)}, 
  //u not supported yet 
   
  // Timezone 
  //e not supported yet 
  //I not supported yet 
  O: function(){ 
   var t = pad(Math.abs(jsdate.getTimezoneOffset()/60*100), 4); 
   if (jsdate.getTimezoneOffset() > 0) t = "-" + t; else t = "+" + t; 
   return t; 
  }, 
  P: function(){var O = f.O();return (O.substr(0, 3) + ":" + O.substr(3, 2))}, 
  //T not supported yet 
  //Z not supported yet 
   
  // Full Date/Time 
  c: function(){return f.Y() + "-" + f.m() + "-" + f.d() + "T" + f.h() + ":" + f.i() + ":" + f.s() + f.P()}, 
  //r not supported yet 
  U: function(){return Math.round(jsdate.getTime()/1000)} 
 }; 
   
 return format.replace(/[\]?([a-zA-Z])/g, function(t, s){ 
  if( t!=s ){ 
   // escaped 
   ret = s; 
  } else if( f[s] ){ 
   // a date function exists 
   ret = f[s](); 
  } else{ 
   // nothing special 
   ret = s; 
  } 
  return ret; 
 }); 
}

X 参考文献

JS获取当前时间的方法 - Zhihu

posted @ 2024-03-10 11:21 千千寰宇阅读(36) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

千千寰宇

大数据与Java软件开发从业者，数智化转型实践者。

[JavaScript] JavaScript的时间与时区

0 序言

1 JavaScript 时间、时区的国际化（案例）

Step1 设置操作系统的时区

Step2.1 测验：new Date().getTime() | 结论：不同时区获取的时间戳一致

Step2.2 测验：Date.parse(new Date("2023-09-18 00:00:00")) | 结论：不同时区获取的时间(字符串)不一致

提一个思考题：为何Step2.2中，北京时区(UTC+8)与都柏林时区(UTC+0)的时差不是8小时，而是7小时？

2 JavaScript 时间 API

2.1 获取时间戳(毫秒级/13位)

2.2 获取时间

2.3 【时间戳】转化为标准的【时间字符串】(YYYY-MM-DD hh:mm:ss)

2.4 封装的时间格式器

X 参考文献

公告