Pada kesempatan kali ini saya akan menampilkan tanggal dan waktu pada halaman website dengan menggunakan JavaScript atau PHP. Tanggal dan waktu berguna bagi pengunjung website untuk mengetahui kapan suatu konten di website Anda dipublikasikan. Hal ini dapat dilakukan dengan beberapa cara. Ini kodenya
1. Menampilkan Tanggal Dan Waktu Menggunakan JavaScript (Sisi klien)
Jika menggunakan metode ini, maka tampil tanggal dan waktu sesuai jam sistem pengunjung website. Yang pertama kali harus Anda siapkan adalah di mana tanggal dan waktu ingin ditampilkan pada halaman website. Hal ini bisa dilakukan dengan menambahkan id pada elemen
atau .
CATATAN. Hari yang digunakan sebagai contoh adalah. 19 Februari 2020
Contoh Menggunakan elemen
<p>Tanggal/Waktu: <span id="tanggalwaktu"></span></p>Contoh Menggunakan elemen
<p>Tanggal/Waktu:</p> <p id="tanggalwaktu"></p>_Nah, langkah selanjutnya adalah menentukan/menerapkan tanggal/waktu pada konten Anda (HTML) yang memiliki id=”datetime”
<p>Tanggal/Waktu: <span id="tanggalwaktu"></span></p> <script> var dt = new Date(); document.getElementById("tanggalwaktu").innerHTML = dt.toLocaleString(); </script>Hasil. Tanggal Waktu. 19/2/2020, 2. 50. 48 sore
Jika Anda hanya ingin menampilkan tanggal saat ini saja
<p>Tanggal/Waktu: <span id="tanggalwaktu"></span></p> <script> var dt = new Date(); document.getElementById("tanggalwaktu").innerHTML = dt.toLocaleDateString(); </script>Hasil. Tanggal Waktu. 19/2/2020
Jika Anda hanya ingin menampilkan waktu saat ini saja
<p>Tanggal/Waktu: <span id="tanggalwaktu"></span></p> <script> var dt = new Date(); document.getElementById("tanggalwaktu").innerHTML = dt.toLocaleTimeString(); </script>_Hasil. Tanggal Waktu. 2. 51. 51 sore
Dengan menggunakan fungsi "toLocaleString" pada kode, keluaran yang muncul akan bergantung pada waktu lokal pengguna. Kode ini mungkin sudah muncul dengan baik, tetapi bagaimana jika Anda ingin menampilkannya dalam format tertentu? . MM. YYY hh. Anda dapat mengganti mm dengan MM. DD. YYY hh. mm. Solusinya adalah sebagai berikut
Contoh MM/DD/YYYY hh. mm
<p>Tanggal/Waktu: <span id="tanggalwaktu"></span></p> <script> var dt = new Date(); document.getElementById("tanggalwaktu").innerHTML = (("0"+(dt.getMonth()+1)).slice(-2)) +"/"+ (("0"+dt.getDate()).slice(-2)) +"/"+ (dt.getFullYear()) +" "+ (("0"+dt.getHours()+1).slice(-2)) +":"+ (("0"+dt.getMinutes()+1).slice(-2)); </script>Hasil. Tanggal Waktu. 19/02/2020 41. 71
Contoh DD. MM. YYYY hh. mm
<p>Tanggal/Waktu: <span id="tanggalwaktu"></span></p> <script> var dt = new Date(); document.getElementById("tanggalwaktu").innerHTML = (("0"+dt.getDate()).slice(-2)) +"."+ (("0"+(dt.getMonth()+1)).slice(-2)) +"."+ (dt.getFullYear()) +" "+ (("0"+dt.getHours()).slice(-2)) +":"+ (("0"+dt.getMinutes()).slice(-2)); </script>_Hasil. Tanggal Waktu. 19. 02. 2020 14. 4619.02.2020 14:46
Pada kode diatas kita tambahkan angka 0 didepan angka satu digit (misal 1, 2, 3, dst) agar terlihat lebih bagus
lebakcyber. net – Membuat jam digital dengan Javascript. Oke melanjutkan tutorial kita tentang Javascript, pada kesempatan kali ini kita akan belajar cara membuat jam digital menggunakan Javascript
Kami dapat menambahkan jam digital ke halaman web yang kami buat untuk memberikan informasi kepada pengunjung web kami tentang waktu mereka mengunjungi web yang kami buat.
Sekarang kita tinggal membuat file index. html baru untuk mempraktekkan cara menampilkan jam digital di javascript dengan menambahkan beberapa perintah css, kemudian masukan perintah seperti dibawah ini
Iklan
<!DOCTYPE html> <html> <head> <title>Membuat Jam Digital di Javascript - Lebak Cyber</title> </head> <body> <center> <h1>Sekarang adalah Jam :</h1> <h1 style="font-size: 120px; font-family: arial;" id="jam"></h1> </center> </body> </html> <script type="text/javascript"> window.onload = function() { jam(); } function jam() { var e = document.getElementById('jam'), d = new Date(), h, m, s; h = d.getHours(); m = set(d.getMinutes()); s = set(d.getSeconds()); e.innerHTML = h +':'+ m +':'+ s; setTimeout('jam()', 1000); } function set(e) { e = e < 10 ? '0'+ e : e; return e; } </script>Sekarang kita coba jalankan file index. html melalui browser, maka akan terbuka halaman yang menunjukkan jam atau waktu sekarang yang kita buat menggunakan Javascript seperti pada gambar dibawah ini
Oke demikianlah cara membuat jam digital yang menggunakan Javascript. Semoga tutorial sederhana ini dapat bermanfaat bagi teman-teman yang sedang belajar Javascript dan sampai jumpa lagi di tutorial belajar Javascript selanjutnya