Advertisement

js 根据北京时间 换算当前设备时区时间

阅读量:

#需求:用户在设置北京时间,自动算出设备所在时区的时间

设计到几个要点:

1.对时区的理解

2.获取设备时区时间

3.时区时间转换

效果图:(我当前时区是)

#我电脑时区

#代码:

复制代码
 <html>

    
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
 <head>
    
     <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    
     <script>
    
     //获取指定时区时间
    
     function getTimeZoneDate(timezone) {
    
         var offset_GMT = new Date().getTimezoneOffset(); // 本地时间和格林威治的时间差,单位为分钟
    
         var nowDate = new Date().getTime(); // 本地时间距 1970 年 1 月 1 日午夜(GMT 时间)之间的毫秒数
    
         var targetDate = new Date(nowDate + offset_GMT * 60 * 1000 + timezone * 60 * 60 * 1000);
    
         return targetDate;
    
     }
    
  
    
     //根据传入时间,转换差异时区时间
    
     function getTimeZoneDate2(date, timezone) {
    
         var nowDate = date.getTime(); // 当前时间距 1970 年 1 月 1 日午夜(GMT 时间)之间的毫秒数
    
         var targetDate = new Date(nowDate - timezone * 60 * 60 * 1000);
    
         return targetDate;
    
     }
    
  
    
     //获取当前时区
    
     function getCurrentZone() {
    
         var timezone = new Date().getTimezoneOffset() / 60 * -1;//获取时区; //目标时区时间,东八区   东时区正数 西市区负数
    
         return timezone;
    
     }
    
  
    
     //时间格式化
    
     function formatDate2Str(date) {
    
         //输出时间
    
         var yy = date.getFullYear()
    
         var MM = date.getMonth() + 1
    
  
    
         // +1使用new Date(YYYY,MM,DD,hh,mm,ss)这种方式月数不会默认-1但是使用new Date('YYYY-MM-DD hh:mm:ss')会默认-1
    
         MM = MM < 10 ? '0' + MM : MM
    
         var dd = date.getDate()
    
         dd = dd < 10 ? '0' + dd : dd
    
         var hh = date.getHours()
    
         hh = hh < 10 ? '0' + hh : hh
    
         var mm = date.getMinutes()
    
         mm = mm < 10 ? '0' + mm : mm
    
         var ss = date.getSeconds()
    
         ss = ss < 10 ? '0' + ss : ss
    
         return yy + '-' + MM + '-' + dd + ' ' + hh + ':' + mm + ':' + ss;
    
     }
    
  
    
     //获取当前时区名称
    
     function getZoneName() {
    
         var tmSummer = new Date(Date.UTC(2005, 6, 30, 0, 0, 0, 0));
    
         var so = -1 * tmSummer.getTimezoneOffset();
    
         var tmWinter = new Date(Date.UTC(2005, 12, 30, 0, 0, 0, 0));
    
         var wo = -1 * tmWinter.getTimezoneOffset();
    
         console.log(so + " " + wo);
    
         if (-660 == so && -660 == wo) return 'Pacific/Midway';
    
         if (-600 == so && -600 == wo) return 'Pacific/Tahiti';
    
         if (-570 == so && -570 == wo) return 'Pacific/Marquesas';
    
         if (-540 == so && -600 == wo) return 'America/Adak';
    
         if (-540 == so && -540 == wo) return 'Pacific/Gambier';
    
         if (-480 == so && -540 == wo) return 'US/Alaska';
    
         if (-480 == so && -480 == wo) return 'Pacific/Pitcairn';
    
         if (-420 == so && -480 == wo) return 'US/Pacific';
    
         if (-420 == so && -420 == wo) return 'US/Arizona';
    
         if (-360 == so && -420 == wo) return 'US/Mountain';
    
         if (-360 == so && -360 == wo) return 'America/Guatemala';
    
         if (-360 == so && -300 == wo) return 'Pacific/Easter';
    
         if (-300 == so && -360 == wo) return 'US/Central';
    
         if (-300 == so && -300 == wo) return 'America/Bogota';
    
         if (-240 == so && -300 == wo) return 'US/Eastern';
    
         if (-240 == so && -240 == wo) return 'America/Caracas';
    
         if (-240 == so && -180 == wo) return 'America/Santiago';
    
         if (-180 == so && -240 == wo) return 'Canada/Atlantic';
    
         if (-180 == so && -180 == wo) return 'America/Montevideo';
    
         if (-180 == so && -120 == wo) return 'America/Sao_Paulo';
    
         if (-150 == so && -210 == wo) return 'America/St_Johns';
    
         if (-120 == so && -180 == wo) return 'America/Godthab';
    
         if (-120 == so && -120 == wo) return 'America/Noronha';
    
         if (-60 == so && -60 == wo) return 'Atlantic/Cape_Verde';
    
         if (0 == so && -60 == wo) return 'Atlantic/Azores';
    
         if (0 == so && 0 == wo) return 'Africa/Casablanca';
    
         if (60 == so && 0 == wo) return 'Europe/London';
    
         if (60 == so && 60 == wo) return 'Africa/Algiers';
    
         if (60 == so && 120 == wo) return 'Africa/Windhoek';
    
         if (120 == so && 60 == wo) return 'Europe/Amsterdam';
    
         if (120 == so && 120 == wo) return 'Africa/Harare';
    
         if (180 == so && 120 == wo) return 'Europe/Athens';
    
         if (180 == so && 180 == wo) return 'Africa/Nairobi';
    
         if (240 == so && 180 == wo) return 'Europe/Moscow';
    
         if (240 == so && 240 == wo) return 'Asia/Dubai';
    
         if (270 == so && 210 == wo) return 'Asia/Tehran';
    
         if (270 == so && 270 == wo) return 'Asia/Kabul';
    
         if (300 == so && 240 == wo) return 'Asia/Baku';
    
         if (300 == so && 300 == wo) return 'Asia/Karachi';
    
         if (330 == so && 330 == wo) return 'Asia/Calcutta';
    
         if (345 == so && 345 == wo) return 'Asia/Katmandu';
    
         if (360 == so && 300 == wo) return 'Asia/Yekaterinburg';
    
         if (360 == so && 360 == wo) return 'Asia/Colombo';
    
         if (390 == so && 390 == wo) return 'Asia/Rangoon';
    
         if (420 == so && 360 == wo) return 'Asia/Almaty';
    
         if (420 == so && 420 == wo) return 'Asia/Bangkok';
    
         if (480 == so && 420 == wo) return 'Asia/Krasnoyarsk';
    
         if (480 == so && 480 == wo) return 'Beijing';//return 'Australia/Perth';
    
         if (540 == so && 480 == wo) return 'Asia/Irkutsk';
    
         if (540 == so && 540 == wo) return 'Asia/Tokyo';
    
         if (570 == so && 570 == wo) return 'Australia/Darwin';
    
         if (570 == so && 630 == wo) return 'Australia/Adelaide';
    
         if (600 == so && 540 == wo) return 'Asia/Yakutsk';
    
         if (600 == so && 600 == wo) return 'Australia/Brisbane';
    
         if (600 == so && 660 == wo) return 'Australia/Sydney';
    
         if (630 == so && 660 == wo) return 'Australia/Lord_Howe';
    
         if (660 == so && 600 == wo) return 'Asia/Vladivostok';
    
         if (660 == so && 660 == wo) return 'Pacific/Guadalcanal';
    
         if (690 == so && 690 == wo) return 'Pacific/Norfolk';
    
         if (720 == so && 660 == wo) return 'Asia/Magadan';
    
         if (720 == so && 720 == wo) return 'Pacific/Fiji';
    
         if (720 == so && 780 == wo) return 'Pacific/Auckland';
    
         if (765 == so && 825 == wo) return 'Pacific/Chatham';
    
         if (780 == so && 780 == wo) return 'Pacific/Enderbury'
    
         if (840 == so && 840 == wo) return 'Pacific/Kiritimati';
    
         return 'US/Pacific';
    
     }
    
  
    
     //根据北京时间,转换成当前时区时间
    
     function calcBeiJing2CurrentZoneTime(bjTime) {
    
         var bjZone = 8;//中国时区
    
         var timezone = getCurrentZone();// 当前时区 ,美国 -4,中国 8
    
         var dt = getTimeZoneDate2(bjTime, bjZone - timezone);
    
         var str = formatDate2Str(dt);
    
         console.log(str);
    
         $("#time").html(str);
    
     }
    
     </script>
    
     <script>
    
     $(function () {
    
         var timezone = getCurrentZone();
    
         $("#zone").html(timezone);
    
         $("#current").html(formatDate2Str(new Date()));
    
         $("#curentZoneName").html(getZoneName());//获取当前时区名称
    
  
    
         var beijingTime = new Date($("#bjTime").val());
    
  
    
         calcBeiJing2CurrentZoneTime(beijingTime);
    
  
    
         $("#bjTime").change(function () {
    
             var beijingTime = new Date($("#bjTime").val());
    
             calcBeiJing2CurrentZoneTime(beijingTime);
    
         });
    
     });
    
     </script>
    
 </head>
    
 <body>
    
 <p>当前时区:<span id="zone"></span></p>
    
 <p>设备时间:<span id="current"></span></p>
    
 <hr>
    
 <p>北京时间:<input id="bjTime" value="2020-10-29 10:00:00"/></p>
    
 <div id="result">
    
     <p><span id="curentZoneName"></span>时间:<span id="time"></span></p>
    
 </div>
    
 </body>
    
 </html>

全部评论 (0)

还没有任何评论哟~