Langsung ke konten utama

Menampilkan Tanggal dan Waktu Secara Dinamis dengan JavaScript dan HTML

Pernahkah Anda ingin menampilkan waktu secara real-time di website Anda? Baik itu untuk mencatat aktivitas pengguna, menampilkan waktu posting artikel, atau sekadar memberikan sentuhan interaktif pada halaman web, menampilkan tanggal dan waktu secara dinamis dapat menjadi solusi yang menarik. Dengan memanfaatkan kekuatan JavaScript dan HTML, Anda bisa membuat elemen waktu yang selalu terbarui tanpa perlu me-refresh halaman. Dalam artikel ini, kita akan membahas langkah-langkah mudah untuk menampilkan time stamp secara dinamis, lengkap dengan beberapa tips untuk menyesuaikan tampilannya sesuai kebutuhan Anda.

JavaScript:

 <script>
    function updateClock() {
        const days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
        const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep",
            "Oct", "Nov", "Dec"
        ];

        const now = new Date();
        const dayName = days[now.getDay()];
        const day = now.getDate();
        const monthName = months[now.getMonth()];
        const year = now.getFullYear();

        const hours = String(now.getHours()).padStart(2, '0');
        const minutes = String(now.getMinutes()).padStart(2, '0');
        const seconds = String(now.getSeconds()).padStart(2, '0');

        const formattedTime = `${dayName}, ${day} ${monthName} ${year} ${hours}:${minutes}:${seconds}`;
        document.getElementById("digitalClock").innerText = formattedTime;
    }
    setInterval(updateClock, 1000);
    updateClock();
 </script>

HTML:

 <div class="col-12 d-flex justify-content-md-end">
    <div id="digitalClock" class="fs-6 fw-semibold"></div>
 </div>

Dengan memahami cara menampilkan tanggal dan waktu secara dinamis menggunakan JavaScript dan HTML, Anda telah menambahkan fitur yang fungsional sekaligus modern pada website Anda. Fitur ini tidak hanya meningkatkan interaktivitas, tetapi juga memberikan nilai tambah dalam pengalaman pengguna. Jangan lupa untuk terus bereksperimen dengan format waktu, zona waktu, dan gaya tampilan agar sesuai dengan tema website Anda. Selamat mencoba, dan semoga artikel ini menjadi inspirasi untuk mengembangkan kemampuan coding Anda lebih jauh!

Komentar

Posting Komentar

Postingan populer dari blog ini

Instalasi Vue 3 menggunakan Vue CLI & Vite

Instalasi Vue 3 menggunakan Vue CLI Vue CLI adalah alat untuk membuat proyek Vue secara otomatis dengan konfigurasi yang sudah diatur sebelumnya. Ini adalah pilihan yang bagus jika kamu ingin memiliki kontrol lebih atas pengaturan proyek dan konfigurasi build. Langkah-langkah: Install Vue CLI secara global (jika belum terpasang) : Buka terminal dan jalankan perintah berikut untuk menginstal Vue CLI secara global di komputer kamu: npm install -g @vue/cli Buat proyek baru menggunakan Vue CLI : Setelah Vue CLI terpasang, kamu bisa membuat proyek Vue 3 baru dengan perintah berikut: // Pilih salah satu vue create nama-proyek npm create vue@latest nama-proyek // Rekomendasi karena sesuai Official Docs Gantilah nama-proyek dengan nama yang kamu inginkan untuk proyekmu. Pilih konfigurasi : Ketika perintah di atas dijalankan, Vue CLI akan menanyakan beberapa pilihan konfigurasi. Pilihlah opsi yang sesuai (misalnya, memilih preset default yang sudah menyertakan Babe...
Posting Komentar
Baca selengkapnya

Project Website CMS: Membuat Fitur Login Admin

Tanpa berlama-lama. Yuk, langsung kita mulai mengerjakan fitur login pada project yang dibuat menggunakan Vue 3 sebagai frontend dan Laravel 10 sebagai backend. Lakukan instalasi project Kalau belum tahu caranya melakukan instalasi, silahkan simak postingan ini: Install Vue.js:  https://www.larazu.biz.id/2025/04/instalasi-vue-3-menggunakan-vue-cli-vite.html Install Laravel: Coming soon Struktur project Dalam case ini, folder frontend dan backend berada pada folder yang sama. Ini adalah struktur project yang saya buat (opsional): 🔵   Backend: Laravel 10 (folder backend/) backend/ ├── app/ │ └── Http/ │ ├── Controllers/ │ │ └── Api/ │ │ └── AuthController.php ← Controller login │ └── Middleware/ │ └── VerifyCsrfToken.php ← Bypass CSRF untuk /api/login ├── config/ │ ├── cors.php ← Atur CORS │ └── session.php ← Atur same_site=lax ├── routes/ │ └── api.php ...
Posting Komentar
Baca selengkapnya

Membuat code block/ syntax highlighter pada Blogger

Untuk membuat code block (blok kode) di Blogger, Anda dapat menggunakan tag HTML <pre><code> ... </code></pre> . Dengan ini, Anda dapat menampilkan kode dengan format yang sesuai dan mencegah interpretasi tag HTML di dalamnya. Langkah-langkah membuat code block/ syntax highlighter: Buka editor postingan Blogger Masuk ke Blogger, lalu pilih postingan yang ingin Anda edit atau buat postingan baru Beralih ke mode HTML Di editor postingan, klik tombol "HTML" (biasanya di sebelah kiri) untuk beralih ke tampilan HTML Tambahkan tag <pre><code>...</code></pre> Posisikan kursor di tempat di mana Anda ingin menampilkan blok kode. Kemudian, ketik atau tempelkan kode Anda di antara tag <pre><code> dan </pre> . Contoh: <pre><code> console.log("Hello, world!"); </code></pre> Sembunyikan tag <p> Jika Anda menambahkan blok kode di dalam paragraf, hilangkan tag <p...
Posting Komentar
Baca selengkapnya