[JavaScript] JavaScript的时间与时区

本姑娘小名如花 發表於 2024-3-10 11:21:00

<h1 id="0-序言">0 序言</h1>
<ul>
<li>
<p>第1章节，原创，主要关注：JS的时间、时区国际化问题</p>
</li>
<li>
<p>第2章节，主要来自于第1篇参考文献（系对第1章节的基础知识的夯实）</p>
</li>
</ul>
<h1 id="1-javascript-时间时区的国际化案例">1 JavaScript 时间、时区的国际化（案例）</h1>
<blockquote>
<p>本案例等同于问题：<strong>JavaScript从浏览器根据不同时区获取时间的问题</strong></p>
</blockquote>
<p>假定现在有两台Windows笔记本电脑。</p>
<h2 id="step1-设置操作系统的时区">Step1 设置操作系统的时区</h2>
<ul>
<li>分别对两台笔记本电脑设置时区为：北京时区、都柏林时区</li>
</ul>
<blockquote>
<ul>
<li>操作路径：控制面板-时钟和区域-日期和时间-更改时区</li>
<li>一般业务系统的实现思路：</li>
</ul>
<blockquote>
<ul>
<li>前端/浏览器请求API时提供当地的时间戳（startTimestamp / endTimestamp）；</li>
<li>前端/浏览器请求API后获得返回的时间戳；</li>
<li>再利用JS获取操作系统的时区，进行本地化时区展示</li>
</ul>
</blockquote>
</blockquote>
<p><img src="https://img2023.cnblogs.com/blog/1173617/202309/1173617-20230918194417338-137879998.png" alt="" loading="lazy"></p>
<blockquote>
<p>北京时区（不涉及夏令时）</p>
</blockquote>
<p><img src="https://img2023.cnblogs.com/blog/1173617/202309/1173617-20230918195042107-1970197511.png" alt="" loading="lazy"></p>
<p><img src="https://img2023.cnblogs.com/blog/1173617/202309/1173617-20230919100351788-620101476.png" alt="" loading="lazy"></p>
<blockquote>
<p>都柏林时区（涉及夏令时）</p>
</blockquote>
<h2 id="step21-测验new-dategettime--结论不同时区获取的时间戳一致">Step2.1 测验：new Date().getTime() | 结论：不同时区获取的时间戳一致</h2>
<p>如下2个时区的时间戳，是由两个人在两台Windows笔记本电脑上人工进行的获取，故毫秒上有一定轻微差距。</p>
<ul>
<li>北京时区<br>
<img src="https://img2023.cnblogs.com/blog/1173617/202309/1173617-20230918194608799-1002816492.png" alt="" loading="lazy"></li>
</ul>
<blockquote>
<p>1695031586299 => 2023-09-18 18:06:26 (UTC+8)</p>
</blockquote>
<ul>
<li>都柏林时区</li>
</ul>
<p><img src="https://img2023.cnblogs.com/blog/1173617/202309/1173617-20230918194624458-2004763401.png" alt="" loading="lazy"></p>
<p>1695031586234 => 2023-09-18 18:06:26 (UTC+8)</p>
<h2 id="step22-测验dateparsenew-date2023-09-18-000000--结论不同时区获取的时间字符串不一致">Step2.2 测验：Date.parse(new Date("2023-09-18 00:00:00")) | 结论：不同时区获取的时间(字符串)不一致</h2>
<ul>
<li>北京时区</li>
</ul>
<p><img src="https://img2023.cnblogs.com/blog/1173617/202309/1173617-20230918194737992-382263509.png" alt="" loading="lazy"></p>
<blockquote>
<p>1694966400000 => 2023-09-18 00:00:00 (北京时区)</p>
</blockquote>
<ul>
<li>都柏林时区</li>
</ul>
<p><img src="https://img2023.cnblogs.com/blog/1173617/202309/1173617-20230918194759119-1346332340.png" alt="" loading="lazy"></p>
<blockquote>
<p>1694991600000 => 2023-09-18 07:00:00 (北京时区)</p>
</blockquote>
<h2 id="提一个思考题为何step22中北京时区utc8与都柏林时区utc0的时差不是8小时而是7小时">提一个思考题：为何Step2.2中，北京时区(UTC+8)与都柏林时区(UTC+0)的时差不是8小时，而是7小时？</h2>
<blockquote>
<p>大家可自行思考，过两天再解答。</p>
</blockquote>
<h1 id="2-javascript-时间-api">2 JavaScript 时间 API</h1>
<h2 id="21-获取时间戳毫秒级13位">2.1 获取时间戳(毫秒级/13位)</h2>
<pre><code class="language-javascript">//方法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
</code></pre>
<h2 id="22-获取时间">2.2 获取时间</h2>
<pre><code class="language-javascript">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( );//获取日期与时间
</code></pre>
<pre><code class="language-javascipt">// 获取当前时间戳(以s为单位)
var timestamp = Date.parse(new Date());
timestamp = timestamp / 1000;
//当前时间戳为：1403149534
console.log("当前时间戳为：" + timestamp);
</code></pre>
<pre><code class="language-javascipt">// 获取某个时间格式的时间戳
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);
</code></pre>
<pre><code class="language-javascipt">// 将当前时间换成时间格式字符串
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());
</code></pre>
<p><img src="https://img2023.cnblogs.com/blog/1173617/202309/1173617-20230918193616391-1841488585.png" alt="" loading="lazy"></p>
<h2 id="23-时间戳转化为标准的时间字符串yyyy-mm-dd-hhmmss">2.3 【时间戳】转化为标准的【时间字符串】(YYYY-MM-DD hh:mm:ss)</h2>
<pre><code class="language-javascript">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
</code></pre>
<h2 id="24-封装的时间格式器">2.4 封装的时间格式器</h2>
<pre><code class="language-javascript">/**
* 时间戳格式化函数
* @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},
N: function(){return f.w() + 1},
S: function(){return txt_ordin ? txt_ordin : '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},
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(/[\]?()/g, function(t, s){
if( t!=s ){
// escaped
ret = s;
} else if( f ){
// a date function exists
ret = f();
} else{
// nothing special
ret = s;
}
return ret;
});
}
</code></pre>
<h1 id="x-参考文献">X 参考文献</h1>
<ul>
<li>JS获取当前时间的方法 - Zhihu</li>
</ul>

</div>
<div id="MySignature" role="contentinfo">
<div class="essaySuffix-box">
<div class="essaySuffix-box-left" style=" margin: 6px auto; ">
   <img src="https://blog-static.cnblogs.com/files/johnnyzen/cnblogs-qq-group-qrcode.gif?t=1679679148" alt="QQ沟通交流群" onload="changeImg(this,200,100)">
</div>
<div class="essaySuffix-box-right">
<span class="essaySuffix-right-title">本文作者</span>：
   <strong><span>千千寰宇</span></strong>
<br>
<span style="font-weight: bold; white-space:nowrap;">本文链接</span>：
      https://www.cnblogs.com/johnnyzen
<br>
<span class="essaySuffix-right-title">关于博文</span>：评论和私信会在第一时间回复，或直接私信我。
<br>
<span class="essaySuffix-right-title">版权声明</span>：本博客所有文章除特别声明外，均采用 BY-NC-SA
许可协议。转载请注明出处！<br>
<span class="essaySuffix-right-title">日常交流</span>：大数据与软件开发-QQ交流群: 774386015<strong>
   <span style="color: #ff0000; font-size: 12pt;">【入群二维码】</span></strong>参见左下角。您的支持、鼓励<span style="color: #ff0000; font-size: 12pt;"></span>是博主技术写作的重要动力！
<br>
</div>
<div style="clear: both;">
</div>
</div><br><br>
来源：https://www.cnblogs.com/johnnyzen/p/18063890

頁: [1]

琼殿技术论坛's Archiver

[JavaScript] JavaScript的时间与时区