cari

Rumah >hujung hadapan web >tutorial js >Bagaimana untuk menukar datetime UTC kepada datetime tempatan menggunakan JavaScript?

Bagaimana untuk menukar datetime UTC kepada datetime tempatan menggunakan JavaScript?

WBOY
WBOYke hadapan
2023-09-12 18:05:04898semak imbas

如何使用 JavaScript 将 UTC 日期时间转换为本地日期时间？

Pengendalian zon masa ialah bahagian penting dalam setiap aplikasi web. Masa yang direkodkan oleh bahagian belakang biasanya dalam format UTC. Walau bagaimanapun, apabila ia dipaparkan kepada pengguna, ia mesti ditukar kepada waktu tempatan pengguna. Ini boleh dicapai melalui JavaScript. Dalam blog ini kita akan melihat bagaimana untuk menukar masa tarikh UTC kepada masa tarikh tempatan menggunakan JavaScript.

JavaScript Tarikh

JavaScript termasuk kelas "Tarikh" yang membolehkan kami bekerja dengan tarikh dan masa. Kelas Date mengandungi pelbagai kaedah untuk bekerja dengan tarikh dan masa, termasuk -

Date() - Mengembalikan tarikh dan masa semasa dalam milisaat getTime() Mengembalikan masa semasa dalam milisaat

getUTCFulYear() - Mengembalikan tahun tarikh dalam zon waktu UTC.

getUTCMonth() - Mengembalikan bulan tarikh dalam zon waktu UTC.

getUTCDate() - Mengembalikan bulan dan hari tarikh dalam zon waktu UTC.

getUTCHours() - Mengembalikan jam tarikh dalam zon waktu UTC.

getUTCMinutes() - Mengembalikan minit tarikh dalam zon waktu UTC.

getUTCSeconds() - Mengembalikan saat tarikh dalam zon waktu UTC.

Tukar UTC kepada waktu tempatan

Kami perlu menukar masa tarikh UTC kepada masa tarikh tempatan menggunakan kaedah getTimezoneOffset(). Kaedah ini mengembalikan perbezaan masa dalam minit antara UTC dan waktu tempatan. Perbezaan minit ini kemudiannya boleh digunakan untuk menukar masa tarikh UTC kepada masa tarikh tempatan.

Contoh

Sebagai contoh, kod berikut menukar masa tarikh UTC kepada masa tarikh tempatan - 

<!DOCTYPE html>
<html>
<body>
   <div id="result"></div>
   <script>
      var utc = new Date();
      var offset = utc.getTimezoneOffset();
      var local = new Date(utc.getTime() + offset * 60000);
      document.getElementById("result").innerHTML = local;
   </script> 
</body>
</html>

Kita boleh lihat di sini objek New Date bernama "utc", yang memegang tarikh dan masa UTC semasa. Kami kemudian menggunakan fungsi getTimezoneOffset() untuk mengira perbezaan masa dalam minit antara UTC dan waktu tempatan. Akhir sekali, kami mengira waktu tempatan dengan menambahkan kuantiti ini pada masa UTC dalam milisaat.

Begitu juga, kita boleh menukar masa tarikh UTC yang ditentukan kepada masa tarikh tempatan Untuk mencapai perkara yang sama, cukup berikan tarikh dan masa UTC sebagai parameter kepada fungsi Date() Object() { [kod asli] } . Sekarang, mari lihat kod untuk menukar masa tarikh UTC "12-11-2018 12:00:00" kepada masa tarikh tempatan −

CONTOH

<!DOCTYPE html>
<html>
<head>
   <title>Date Example</title>
</head>
<body>
   <div id="result"></div>
   <script>
      var utc = new Date("2018-11-12 12:00:00");
      var offset = utc.getTimezoneOffset();
      var local = new Date(utc.getTime() + offset * 60000);
      document.getElementById("result").innerHTML = "UTC : " + utc + "<br>" + "Local : " + local;
   </script>
</body>
</html>

Kami telah melepasi tarikh dan masa UTC sebagai rentetan kepada pembina Date(). Kami kemudian menukar waktu tarikh UTC kepada masa tarikh tempatan menggunakan kaedah yang sama seperti sebelum ini.

Tukar waktu tempatan kepada UTC

Sekarang, bagaimana kita boleh pergi dari waktu tempatan ke UTC Untuk menukar masa tarikh tempatan kepada masa tarikh UTC, kita boleh menggunakan kaedah getTimezoneOffset() sekali lagi Memandangkan fungsi ini mengembalikan perbezaan masa dalam minit antara UTC dan setempat masa. Nombor perbezaan ini boleh digunakan untuk menukar masa tarikh tempatan kepada masa tarikh UTC.

Sebagai contoh, kod berikut menukar masa tarikh tempatan kepada masa tarikh UTC - 

<!DOCTYPE html>
<html>
<body>
   <div id="result"></div>
   <script>
      var local = new Date();
      var offset = local.getTimezoneOffset();
      var utc = new Date(local.getTime() - offset * 60000);
      document.getElementById("result").innerHTML = utc;
   </script>
</body>
</html>

Dalam kod di atas, kami mula-mula mencipta objek Tarikh baharu bernama "tempatan" yang mengandungi tarikh dan masa setempat semasa. Kami kemudian menggunakan kaedah getTimezoneOffset() untuk mendapatkan perbezaan masa dalam minit antara UTC dan waktu tempatan. Selepas menolak nilai ini daripada waktu tempatan dalam milisaat, kami mendapat masa UTC.

Kami juga boleh menukar masa tarikh tempatan tertentu kepada masa tarikh UTC dengan menghantar tarikh dan masa setempat sebagai argumen kepada pembina Date() Contohnya, kod berikut akan menukar masa tarikh tempatan "2018-. 11-12 12:00:00" ke dalam masa tarikh UTC −

Contoh

<!DOCTYPE html>
<html>
<body>
   <div id="result"></div>
   <script>
      var local = new Date("2018-11-12 12:00:00");
      var offset = local.getTimezoneOffset();
      var utc = new Date(local.getTime() - offset * 60000);
      document.getElementById("result").innerHTML = utc;
   </script> 
</body>
</html>

Kami menghantar tarikh dan masa tempatan sebagai rentetan kepada pembina Date(). Kami kemudian menukar waktu tarikh tempatan kepada waktu tarikh UTC menggunakan kaedah yang sama seperti sebelumnya.

KESIMPULAN

Dalam tutorial ini, kami mempelajari cara menukar waktu tarikh UTC kepada waktu tarikh tempatan menggunakan JavaScript. Kami juga mengetahui bahawa kelas Tarikh JavaScript menyediakan pelbagai kaedah untuk bekerja dengan tarikh dan masa, seperti getTimezoneOffset(), yang boleh digunakan untuk menukar datetime UTC kepada datetime setempat. Kami juga mempelajari cara menukar waktu tarikh tempatan kepada waktu tarikh UTC menggunakan kaedah yang sama dalam blog ini. Adalah penting untuk ambil perhatian bahawa pengendalian zon masa adalah aspek penting bagi mana-mana aplikasi web, dan ia juga penting untuk menukar masa dengan betul supaya ia dipaparkan dengan betul kepada pengguna.

Atas ialah kandungan terperinci Bagaimana untuk menukar datetime UTC kepada datetime tempatan menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript Object for 构造函数 date 字符串 number function 对象 constructor this
Kenyataan：
Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam
Artikel sebelumnya：Menjelaskan enjin V8 dalam Node.jsArtikel seterusnya：Menjelaskan enjin V8 dalam Node.js

Artikel berkaitan

Lihat lagi