javascript+php实现根据用户时区显示当地时间的方法

实现根据用户时区显示当地时间的方法需要以下步骤：

1. 获取用户的时区

使用Javascript的Date对象获取用户所在时区的偏移量。代码如下：

var d = new Date();
var timezoneOffset = d.getTimezoneOffset() / 60;

其中getTimezoneOffset()方法返回的是分钟，所以需要将其转化为小时。这个时区偏移量是用户所在的时区和UTC之间的差值，通常是以负数表示。

1. 发送时区信息给服务器

将获取到的时区偏移量发送给后台的PHP代码进行处理。可以使用Ajax向服务器端发送请求，示例代码如下：

var xhr = new XMLHttpRequest();
var data = "timezoneOffset=" + timezoneOffset;
xhr.open('POST', 'getTime.php');
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send(data);

其中getTime.php是后台处理时区信息的文件，使用POST方法向后台发送请求，将时区偏移量作为请求参数发送到服务器端。

1. 获取当地时间

在服务器端使用PHP的date()函数根据时区偏移量获取当地的时间。代码如下：

$timezone_offset = $_POST['timezoneOffset']; // 从请求中获取时区偏移量
$timestamp = time() + $timezone_offset * 3600; // 计算当前时间戳
$local_time = date('Y-m-d H:i:s', $timestamp); // 根据时区获取当地时间
echo $local_time; // 将当地时间返回给前台

其中，time()函数返回的是当前的时间戳，再加上时区偏移量即可得到当地的时间戳。然后使用date()函数将时间戳转化为当地的时间。

1. 在前台显示当地时间

将后台返回的当地时间显示在前端页面上。示例代码如下：

xhr.onreadystatechange = function() {
  if (xhr.readyState == 4 && xhr.status == 200) {
    var local_time = xhr.responseText;
    var time_elem = document.getElementById('local-time');
    time_elem.innerHTML = local_time;
  }
};

其中local_time即为后台返回的当地时间，将其赋值给id为'local-time'的HTML元素即可在页面上显示当地时间。

示例1：使用jQuery实现

HTML代码：

<p>当前时区偏移量为<span id="timezone-offset"></span></p>
<p>当前本地时间为<span id="local-time"></span></p>

Javascript代码：

$(document).ready(function() {
  var d = new Date();
  var timezoneOffset = d.getTimezoneOffset() / 60;
  $('#timezone-offset').text(timezoneOffset);
  $.post('getTime.php', { timezoneOffset: timezoneOffset }, function(localTime) {
    $('#local-time').text(localTime);
  });
});

jQuery的$.post()方法实现了Ajax的POST请求，成功返回时会调用传入的回调函数。其中localTime即为后台返回的当地时间。

示例2：将当地时间显示在表单中

HTML代码：

<p>请选择您所在的时区：<select id="timezone-select" name="timezone"></select></p>
<p>当前本地时间为：<input type="text" id="local-time-input" name="local_time"></p>

Javascript代码：

$(document).ready(function() {
  var tzSelect = $('#timezone-select');
  var localTimeInput = $('#local-time-input');

  // 填充时区下拉框
  $.get('timezones.json', function(timezones) {
    $.each(timezones, function(key, value) {
      var option = $('<option>').attr('value', key).text(value);
      tzSelect.append(option);
    });

    // 获取时区并显示当地时间
    var d = new Date();
    var timezoneOffset = d.getTimezoneOffset() / 60;
    var timezone = tzSelect.val();
    $.post('getTime.php', { timezoneOffset: timezoneOffset, timezone: timezone }, function(localTime) {
      localTimeInput.val(localTime);
    });

    // 监听时区下拉框的改变
    tzSelect.change(function() {
      var timezone = $(this).val();
      $.post('getTime.php', { timezoneOffset: timezoneOffset, timezone: timezone }, function(localTime) {
        localTimeInput.val(localTime);
      });
    });
  });
});

除了获取时区偏移量并发送请求，此示例还有以下变化：

1）使用jQuery的$.get()方法从timezones.json文件中获取时区信息并填充到下拉框中。

2）当时区下拉框的值改变时，重新发送POST请求并更新输入框中的值。

注：timezones.json文件内容如下：

{
  "-12": "国际日期变更线西",
  "-11": "中途岛、萨摩亚群岛",
  "-10": "夏威夷",
  "-9.5": "马克萨斯群岛",
  "-9": "阿拉斯加",
  "-8": "太平洋时间（美国和加拿大）、蒂华纳",
  "-7": "山地时间（美国和加拿大）",
  "-6": "中部时间（美国和加拿大）、瓜达拉哈拉、墨西哥城",
  "-5": "东部时间（美国和加拿大）、波哥大、利马",
  "-4.5": "加拉加斯",
  "-4": "大西洋时间（加拿大）、卡拉卡斯、拉巴斯",
  "-3.5": "纽芬兰",
  "-3": "巴西利亚、布宜诺斯艾利斯、乔治敦",
  "-2": "中大西洋",
  "-1": "亚速尔群岛、佛得角群岛",
  "0": "格林威治标准时间、都柏林、爱丁堡、里斯本、伦敦",
  "1": "柏林、布鲁塞尔、哥本哈根、马德里、巴黎、罗马",
  "2": "安卡拉、雅典、布加勒斯特、耶路撒冷、开罗",
  "3": "莫斯科、利雅得、伊斯坦布尔",
  "3.5": "德黑兰",
  "4": "阿布扎比、巴库、马斯喀特、第比利斯",
  "4.5": "卡布尔",
  "5": "叶卡捷琳堡、伊斯兰堡、卡拉奇、塔什干",
  "5.5": "马德拉斯、加尔各答、孟买、新德里",
  "6": "新西伯利亚、阿斯塔纳、新加坡、曼谷",
  "7": "克拉斯诺亚尔斯克、曼谷、河内、雅加达",
  "8": "北京、重庆、香港、新加坡、台北",
  "9": "东京、首尔、大阪、雅库茨克",
  "9.5": "达尔文",
  "10": "布里斯班、坎培拉、墨尔本、悉尼、符拉迪沃斯托克",
  "11": "马加丹、新喀里多尼亚",
  "12": "奥克兰、惠灵顿、斐济、堪察加半岛"
}