JS-时区选择-获取当前时区

╰+攻爆jí腚メ 2022-04-01 07:11 451阅读 0赞

一个时区选择插件的使用，以及获取当前时区的例子。

  1. <!DOCTYPE html>
  2. <html>
  4.     <head>
  5.         <meta charset="UTF-8">
  6.         <title></title>
  7.         <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  8.         <script src="timezones.full.js"></script>
  9.         <script src="moment-timezone-with-data-2012-2022.min.js"></script>
  10.         <style>
  11.             div {
  12.                 width: 500px;
  13.                 margin: 0 auto;
  14.                 margin-top: 400px;
  15.             }
  16.         </style>
  17.     </head>
  19.     <body>
  20.         <div>
  21.             <select></select>
  22.             <br /><br />
  23.             <button>获取值</button>
  24.             <br /><br />
  25.             <span></span>
  26.         </div>
  27.     </body>
  28.     <script>
  29.         //初始化
  30.         $('select').timezones();
  31. //        $('select').val('Asia/Shanghai');
  32.         //选中当前时区,有些浏览器不支持
  33.         $('select').val(Intl.DateTimeFormat().resolvedOptions().timeZone);
  34.         //使用moment-timezone获取当前时区
  35. //        $('select').val(moment.tz.guess());
  36.         $("button").click(function() {
  37.             $("span").html($("select").val());
  38.         });
  40. //        console.log(Intl.DateTimeFormat().resolvedOptions().timeZone)
  41.         //推测当前时区
  42.         console.log(moment.tz.guess());
  44.         //方法可返回格林威治时间和本地时间之间的时差，以分钟为单位。
  45.         var d = new Date();
  46.         var n = d.getTimezoneOffset();
  47.     </script>
  49. </html>

效果：
在这里插入图片描述
Intl是Internationalization API，但是有些浏览器不支持。

  1. Intl.DateTimeFormat().resolvedOptions().timeZone

Intl浏览器支持情况：
在这里插入图片描述
参考

https://caniuse.com/#search=DateTimeFormat
https://github.com/firstandthird/timezones
http://momentjs.com/timezone/

发表评论

表情：
评论列表 （有 0 条评论，451人围观）

还没有评论，来说两句吧...

相关阅读