Cara menggunakan html tanggal dan waktu

Question

Setelah di artikel yang sebelumnya kita mencoba tutorial menampilkan tanggal dan waktu dengan PHP, saat ini kita akan mencoba menampilkannya dengan JavaScript. Dengan JavaScript waktu yang akan kita tampilkan akan terlihat berjalan atau aktif.

Silahkan teman-teman ketik source code seperti dibawah ini:




	Jam (Aktif) With JavaScript

Mungkin agak sedikit membingungkan bagi teman-teman yang baru mengenal JavaScript.

Dari contoh diatas saya mencoba menampilkan jam (aktif) serta skript pada baris berikutnya saya mencoba menampilkan hari, tanggal bulan dan tahun.

Javascript adalah salah satu bahasa pemrograman tingkat tinggi yang bertipe interpreter. Javascript berfungsi untuk validasi atau manipulasi data baik tampilan atau sistem yang ada di dalam website.

Pada saat kamu membuat website yang bersifat informasi yang disampaikan oleh publik atau masyarakat, seperti website berita, ramalan cuaca, bisnis, bank, dan aktivitas lainnya, pasti kamu membutuhkan informasi terkini pada aktivitas website tersebut. Penulis akan memberikan tutorial untuk menampilkan waktu secara lengkap, termasuk hari, tanggal, bulan, tahun, beserta zona waktu dengan Javascript.

Berikut cara menampilkan tanggal dan jam dengan Javascript.

Langkah:

1. Silahkan aktifkan teks editor seperti Notepad++, Sublime, Visual Code, dan sebagainya.

2. Silahkan ketik kode script di bawah ini.



	Tutorial Menampilkan Waktu Lengkap Dengan Javascript


	Menampilkan Waktu Lengkap Dengan Javascript

3. Simpan hasil kode script tadi dengan tekan CTRL + S.

4. Pilihlah tempat simpan sesuai keinginan kamu, berikan nama “tampil-waktu-full.html”.

5. Klik Save.

6. Cari file yang tadi, kemudian klik kanan pada mouse – Open With – Web Browser app (Chrome, Mozilla, atau Microsoft Edge).

Selesai.

Catatan:

Pada kode perintah di atas merupakan kode perintah yang berfungsi untuk menampilkan waktu lengkap. Jadi, kamu bisa melakukan custom tampilan waktu lengkap tersebut sesuai keinginan kamu dengan bantuan CSS pada elemen

baik itu id atau class, agar tampilan waktu tersebut lebih menarik untuk visitor yang mengunjungi website.

Kini, kamu bisa menampilkan waktu lengkap di dalam website buatan kamu dengan Javascript, agar si pengunjung (visitor) bisa mengetahui waktu saat ini pada saat membuka website kamu.

Dalam kehidupan kita sehari-hari tanggal dan waktu melekat erat dirutinitas kita, begitu juga dalam bahasa pemrograman. Di tutorial ini penulis akan mengulas penggunaan tanggal dan waktu pada javascript.

Dalam pemrograman tentunya penggunaan tanggal dan waktu sangatlah penting, misalnya untuk merekam setiap perubahan yang terjadi pada data, tanggal masuk atau bahkan mungkin tanggal modifikasi, memudahkan pembuatan laporan periodik, jadwal transportasi dan lain sebagainya.

Tanggal dan waktu pada javascript secara bawaan mengambil data dari browser, atau dari komputer pengguna, berdasarkan zona waktu masing-masing pengguna.

Cara menggunakan tanggal dan waktu di javascript

Pada dasarnya javascript telah menyediakan Date Object, untuk dapat menggunakan tanggal dan waktu pada javascript kita bisa menggunakan class Date, didalam class Date tersebut menyimpan object tanggal dan waktu.

Berikut ini contoh penggunaan tanggal dan waktu tanpa parameter apapun, dimana kita akan mengeluarkan tanggal dan waktu saat ini.

<html>
<head>
	<script type="text/javascript">
		var tanggalWaktu = new Date();
		console.log(tanggalWaktu);
	script>
head>
html>
Code language: HTML, XML (xml)

Hasilnya…

Perhatikan pada output diatas, data yang keluar adalah seperti dibawah ini.

Sat Sep 19 2020 20:54:05 GMT+0700 (Western Indonesia Time)

Berdasarkan format diatas menggunakan zona waktu komputer penulis, berikut ini tabel penjelasannya.

HariBulanTanggalTahunJamMenitDetikZona WaktuSatSep192020205405GMT+0700

Selain menentukan tanggal dan waktu saat ini, kita juga dapat menentukan tanggal dan waktu secara manual.

ParameterPenjelasanDate(timestamp)Menentukan tanggal dan waktu menggunakan format unix timestamp.Date(string)Menentukan tanggal dan waktu menggunakan string tanggal dan waktu. Contoh: September 19 2020 21:14Date(tahun, bulan, hari, jam, menit, detik, milidetik)Menentukan tanggal dan waktu berdasarkan pecahan format tanggal dan waktu.

Berikut ini contoh penggunaan class Date() masing-masing yang tertera pada tabel diatas.

<html>
<head>
	<script type="text/javascript">
		// Menggunakan unix timestamp
		var tanggalWaktuTimestamp = new Date(1600525320000);

		// Menggunakan string
		var tanggalWaktuString = new Date('September 19 2020 21:22');

		// Menggunakan pecahan tanggal dan waktu
		var tanggalWaktuPecahan = new Date(2020, 8, 19, 21, 22, 0, 0);

		console.log(tanggalWaktuTimestamp);
		console.log(tanggalWaktuString);
		console.log(tanggalWaktuPecahan);
	script>
head>
html>
Code language: HTML, XML (xml)

Masing-masing tanggal memiliki kesamaan, mungkin hanya pada unix timestamp yang berbeda pada bagian waktu, karena kadang-kadang unix timestamp tidak akurat, entah mengapa.

Berikut ini gambar dari hasil contoh kode tanggal dan waktu diatas.

Selain menampilkan tanggal dan waktu dengan format diatas, di javascript kita dapat mengambil satu persatu tanggal dan waktu untuk kebutuhan tertentu, yaitu dengan menggunakan get, dengan menggunakan get kita bisa mengambil data satu persatu seperti tahun, tanggal dan lain-lain.

Berikut ini tabel fungsi get…

FungsiKeterangangetFullYear()TahungetMonth()BulangetDate()Tanggal

<html>
<head>
	<script type="text/javascript">
		// Menggunakan unix timestamp
		var tanggalWaktuTimestamp = new Date(1600525320000);

		// Menggunakan string
		var tanggalWaktuString = new Date('September 19 2020 21:22');

		// Menggunakan pecahan tanggal dan waktu
		var tanggalWaktuPecahan = new Date(2020, 8, 19, 21, 22, 0, 0);

		console.log(tanggalWaktuTimestamp);
		console.log(tanggalWaktuString);
		console.log(tanggalWaktuPecahan);
	script>
head>
html>
Code language: HTML, XML (xml)

0Jam

<html>
<head>
	<script type="text/javascript">
		// Menggunakan unix timestamp
		var tanggalWaktuTimestamp = new Date(1600525320000);

		// Menggunakan string
		var tanggalWaktuString = new Date('September 19 2020 21:22');

		// Menggunakan pecahan tanggal dan waktu
		var tanggalWaktuPecahan = new Date(2020, 8, 19, 21, 22, 0, 0);

		console.log(tanggalWaktuTimestamp);
		console.log(tanggalWaktuString);
		console.log(tanggalWaktuPecahan);
	script>
head>
html>
Code language: HTML, XML (xml)

1Menit

<html>
<head>
	<script type="text/javascript">
		// Menggunakan unix timestamp
		var tanggalWaktuTimestamp = new Date(1600525320000);

		// Menggunakan string
		var tanggalWaktuString = new Date('September 19 2020 21:22');

		// Menggunakan pecahan tanggal dan waktu
		var tanggalWaktuPecahan = new Date(2020, 8, 19, 21, 22, 0, 0);

		console.log(tanggalWaktuTimestamp);
		console.log(tanggalWaktuString);
		console.log(tanggalWaktuPecahan);
	script>
head>
html>
Code language: HTML, XML (xml)

2Detik

<html>
<head>
	<script type="text/javascript">
		// Menggunakan unix timestamp
		var tanggalWaktuTimestamp = new Date(1600525320000);

		// Menggunakan string
		var tanggalWaktuString = new Date('September 19 2020 21:22');

		// Menggunakan pecahan tanggal dan waktu
		var tanggalWaktuPecahan = new Date(2020, 8, 19, 21, 22, 0, 0);

		console.log(tanggalWaktuTimestamp);
		console.log(tanggalWaktuString);
		console.log(tanggalWaktuPecahan);
	script>
head>
html>
Code language: HTML, XML (xml)

3Milidetik

<html>
<head>
	<script type="text/javascript">
		// Menggunakan unix timestamp
		var tanggalWaktuTimestamp = new Date(1600525320000);

		// Menggunakan string
		var tanggalWaktuString = new Date('September 19 2020 21:22');

		// Menggunakan pecahan tanggal dan waktu
		var tanggalWaktuPecahan = new Date(2020, 8, 19, 21, 22, 0, 0);

		console.log(tanggalWaktuTimestamp);
		console.log(tanggalWaktuString);
		console.log(tanggalWaktuPecahan);
	script>
head>
html>
Code language: HTML, XML (xml)

4Mengambil format timestamp.

Dari tabel diatas anda bisa melihat bagaimana cara pengambilan format pecahan tanggal dan waktu, berikut ini penulis contohkan untuk mengambil tanggal, bulan, dan tahun.

kode html

Cara menggunakan html tanggal dan waktu

Menampilkan Waktu Lengkap Dengan Javascript

Cara menggunakan tanggal dan waktu di javascript

Bài Viết Liên Quan

Cara menggunakan save image temporary python

Ekstensi kode studio visual html css

Https notfound PHP

Cara menggunakan integer to date python

Python mengganti karakter dalam file teks

Cara mengecek nomor npwp yang hilang

Bagaimana Anda membuat diagram di mysql?

Cara menggunakan contoh perulangan while php

Marksheet code in JavaScript

Cara menggunakan perintah dasar python

Cara menggunakan baris ungroup di excel

Apakah bisa transfer dari OVO ke GoPay?

Cara menghapus squarespace javascript yang tidak terpakai

Bagaimana Anda mengarahkan ke halaman lain di html setelah mengirimkan?

Scrape website to Excel

Cara menggunakan php max_input_vars not updating

Cara menggunakan website forum php

Cara aktivasi kartu BRIZZI di ATM BRI

Cara menggunakan const javascript adalah

Cara menggunakan mysql aplikasi apa?

Có thể bạn quan tâm

Google Sheets difference between two columns

Cara mengunduh kamus dengan python

Apa perbedaan list dan array pada python?

How do I push data from one Excel workbook to another?

Cara menggunakan raise vs return python

Cara konfigurasi mysql di xampp

Spreadsheet odoo

Cara mengubah server phpmyadmin

Cara membuat paragraf di css

Cara menggunakan perbedaan laravel dan php

Xem Nhiều

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội