cari
Rumahhujung hadapan webtutorial jsBagaimana untuk menukar datetime UTC kepada datetime tempatan menggunakan JavaScript?

如何使用 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!

Kenyataan
Artikel ini dikembalikan pada:tutorialspoint. Jika ada pelanggaran, sila hubungi admin@php.cn Padam
Ganti aksara rentetan dalam javascriptGanti aksara rentetan dalam javascriptMar 11, 2025 am 12:07 AM

Penjelasan terperinci mengenai kaedah penggantian rentetan javascript dan Soalan Lazim Artikel ini akan meneroka dua cara untuk menggantikan watak rentetan dalam JavaScript: Kod JavaScript dalaman dan HTML dalaman untuk laman web. Ganti rentetan di dalam kod JavaScript Cara yang paling langsung ialah menggunakan kaedah pengganti (): str = str.replace ("cari", "ganti"); Kaedah ini hanya menggantikan perlawanan pertama. Untuk menggantikan semua perlawanan, gunakan ungkapan biasa dan tambahkan bendera global g: str = str.replace (/fi

Bagaimana saya membuat dan menerbitkan perpustakaan JavaScript saya sendiri?Bagaimana saya membuat dan menerbitkan perpustakaan JavaScript saya sendiri?Mar 18, 2025 pm 03:12 PM

Artikel membincangkan membuat, menerbitkan, dan mengekalkan perpustakaan JavaScript, memberi tumpuan kepada perancangan, pembangunan, ujian, dokumentasi, dan strategi promosi.

Bagaimanakah saya mengoptimumkan kod JavaScript untuk prestasi dalam penyemak imbas?Bagaimanakah saya mengoptimumkan kod JavaScript untuk prestasi dalam penyemak imbas?Mar 18, 2025 pm 03:14 PM

Artikel ini membincangkan strategi untuk mengoptimumkan prestasi JavaScript dalam pelayar, memberi tumpuan kepada mengurangkan masa pelaksanaan dan meminimumkan kesan pada kelajuan beban halaman.

kesan matriks jQuerykesan matriks jQueryMar 10, 2025 am 12:52 AM

Bawa kesan filem matriks ke halaman anda! Ini adalah plugin jQuery yang sejuk berdasarkan filem terkenal "The Matrix". Plugin mensimulasikan kesan aksara hijau klasik dalam filem, dan hanya pilih gambar dan plugin akan mengubahnya menjadi gambar gaya matriks yang diisi dengan aksara angka. Datang dan cuba, sangat menarik! Bagaimana ia berfungsi Plugin memuat imej ke kanvas dan membaca nilai piksel dan warna: data = ctx.getimagedata (x, y, settings.grainsize, settings.grainsize) .data Plugin dengan bijak membaca kawasan segi empat tepat gambar dan menggunakan jQuery untuk mengira warna purata setiap kawasan. Kemudian, gunakan

Bagaimanakah saya boleh debug kod javascript dengan berkesan menggunakan alat pemaju pelayar?Bagaimanakah saya boleh debug kod javascript dengan berkesan menggunakan alat pemaju pelayar?Mar 18, 2025 pm 03:16 PM

Artikel ini membincangkan debugging JavaScript yang berkesan menggunakan alat pemaju pelayar, memberi tumpuan kepada menetapkan titik putus, menggunakan konsol, dan menganalisis prestasi.

Cara Membina Slider JQuery MudahCara Membina Slider JQuery MudahMar 11, 2025 am 12:19 AM

Artikel ini akan membimbing anda untuk membuat karusel gambar mudah menggunakan perpustakaan jQuery. Kami akan menggunakan perpustakaan BXSlider, yang dibina di atas jQuery dan menyediakan banyak pilihan konfigurasi untuk menubuhkan karusel. Pada masa kini, Gambar Carousel telah menjadi ciri yang mesti ada di laman web - satu gambar lebih baik daripada seribu perkataan! Selepas membuat keputusan untuk menggunakan karusel gambar, soalan seterusnya adalah bagaimana untuk menciptanya. Pertama, anda perlu mengumpul gambar-gambar resolusi tinggi yang berkualiti tinggi. Seterusnya, anda perlu membuat karusel gambar menggunakan HTML dan beberapa kod JavaScript. Terdapat banyak perpustakaan di web yang dapat membantu anda membuat karusel dengan cara yang berbeza. Kami akan menggunakan Perpustakaan BXSlider Sumber Terbuka. Perpustakaan BXSlider menyokong reka bentuk responsif, jadi karusel yang dibina dengan perpustakaan ini dapat disesuaikan dengan mana -mana

Meningkatkan markup struktur dengan JavaScriptMeningkatkan markup struktur dengan JavaScriptMar 10, 2025 am 12:18 AM

Mata utama yang dipertingkatkan penandaan berstruktur dengan JavaScript dapat meningkatkan kebolehcapaian dan pemeliharaan kandungan laman web sambil mengurangkan saiz fail. JavaScript boleh digunakan secara berkesan untuk menambah fungsi secara dinamik ke elemen HTML, seperti menggunakan atribut CITE untuk memasukkan pautan rujukan secara automatik ke dalam rujukan blok. Mengintegrasikan JavaScript dengan tag berstruktur membolehkan anda membuat antara muka pengguna yang dinamik, seperti panel tab yang tidak memerlukan penyegaran halaman. Adalah penting untuk memastikan bahawa peningkatan JavaScript tidak menghalang fungsi asas laman web; Teknologi JavaScript Lanjutan boleh digunakan (

Cara memuat naik dan memuat turun fail CSV dengan sudutCara memuat naik dan memuat turun fail CSV dengan sudutMar 10, 2025 am 01:01 AM

Set data sangat penting dalam membina model API dan pelbagai proses perniagaan. Inilah sebabnya mengapa mengimport dan mengeksport CSV adalah fungsi yang sering diperlukan. Dalam tutorial ini, anda akan belajar cara memuat turun dan mengimport fail CSV dalam sudut

See all articles

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
3 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Tetapan grafik terbaik
3 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa
3 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌

Alat panas

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

PhpStorm versi Mac

PhpStorm versi Mac

Alat pembangunan bersepadu PHP profesional terkini (2018.2.1).

Muat turun versi mac editor Atom

Muat turun versi mac editor Atom

Editor sumber terbuka yang paling popular

mPDF

mPDF

mPDF ialah perpustakaan PHP yang boleh menjana fail PDF daripada HTML yang dikodkan UTF-8. Pengarang asal, Ian Back, menulis mPDF untuk mengeluarkan fail PDF "dengan cepat" dari tapak webnya dan mengendalikan bahasa yang berbeza. Ia lebih perlahan dan menghasilkan fail yang lebih besar apabila menggunakan fon Unicode daripada skrip asal seperti HTML2FPDF, tetapi menyokong gaya CSS dsb. dan mempunyai banyak peningkatan. Menyokong hampir semua bahasa, termasuk RTL (Arab dan Ibrani) dan CJK (Cina, Jepun dan Korea). Menyokong elemen peringkat blok bersarang (seperti P, DIV),

Dreamweaver Mac版

Dreamweaver Mac版

Alat pembangunan web visual