文章内容

2021/2/7 14:52:34,作 者: 黄兵

D3.js关于时间转换的问题

最近在使用D3.js的时候,从后端读取的是iso标准时间,形如:

2021-02-07T06:22:29

之后开始转换:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    var utcTime='2021-02-07T06:22:29';
    var localTime=new Date(utcTime)
    document.write('<p>当前UTC时间是:'+utcTime+'</p>')
    document.write('<p>本地时间是: '+localTime+'</p>')
    document.write('<p>当前时间偏移: '+localTime.getTimezoneOffset()/60+'小时</p>')
</script>
</body>
</html>

结果如下:

当前UTC时间是:2021-02-07T06:22:29

本地时间是: Sun Feb 07 2021 06:22:29 GMT+0800 (中国标准时间)

当前时间偏移: -8小时

显然是错误的,这里主要是时区偏移存在问题,应该是+8的,却变成了-8。

看样子需要对时间进行处理:

首先将时间转换成ISO-8601的标准,形如:

2021-02-07T06:22:29Z

修改之后的代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    var utcTime='2021-02-07T06:22:29';
    var localTime=new Date(utcTime)
    document.write('<p>当前UTC时间是:'+utcTime+'</p>')
    document.write('<p>本地时间是: '+localTime+'</p>')
    document.write('<p>当前时间偏移: '+localTime.getTimezoneOffset()/60+'小时</p>')
    var iso8601='2021-02-07T06:22:29'+'Z';
    document.write('<p>当前ISO-8601时间是:'+iso8601+'</p>')
    var convertISO8601toLocalTime=new Date(iso8601);
    document.write('<p>本地时间是: '+convertISO8601toLocalTime+'</p>')
</script>
</body>
</html>

由于后端读取的与ISO-8601时间不同,所以在这里直接在后面加了一个大写的‘Z’使其与ISO-8601时间格式相同。

结果如下:

当前UTC时间是:2021-02-07T06:22:29

本地时间是: Sun Feb 07 2021 06:22:29 GMT+0800 (中国标准时间)

当前时间偏移: -8小时

当前ISO-8601时间是:2021-02-07T06:22:29Z

本地时间是: Sun Feb 07 2021 14:22:29 GMT+0800 (中国标准时间)

问题终于解决,最后总结一下:

只要您与服务器期望的格式保持一致,您实际上就不必执行所有使事情复杂化的解析过程。


参考资料:

1、Convert UTC date time to local date time

2、MDN Web Docs - Date


黄兵个人博客原创。

转载请注明出处:黄兵个人博客 - D3.js关于时间转换的问题

分享到:

发表评论

评论列表