#需求:用户在设置北京时间，自动算出设备所在时区的时间
设计到几个要点：
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>
版权声明：本文为nankec原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。