Menampilkan Jam dan Tanggal dengan JavaScript

Nah kali ini gw mau share buat temen yang ingin menampilkan jam dan tanggal dengan menggunakan javascript. Di tutorial ini gw pake timer setiap detik untuk mendapatkan data jam, selain itu juga gw bikin variable bulan dan hari sendiri. Untuk bulan gw pake alias yang sering di pake, contoh nya : 

"Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"

dan untuk hari gw pake bahasa indonesia seperti berikut : 

'Minggu', 'Senin', 'Selasa', 'Rabu', 'Kamis', 'Jumat', 'Sabtu'

Nah kedua variable itu gw simpen di array yang nanti nya tinggal di panggil sesuai data yang ada. Oke langsung kita mulai ajah yah, caranya simpel buka file php yang ingin di tambahkan jam dan tanggal. Lalu tambahkan script ini : 

<div style="text-align:center">
<h2>Waktu Sekarang : </h2>
<b><label id="tglSekarang" style="font-size: 20px;"> - </label></b><br>
<b><label id="waktuSekarang" style="font-size: 40px;"> - </label></b><br></div>

Oke kita sudah membuat id label yang nanti akan kita masukan jam dan tanggal melalui javascript. Sekarang kita tambahkan script berikut di file yang sama.

<script>
   //MEMANGGIL FUNSI startTime
    startTime();

    function startTime() {
        var today = new Date(); 
        var monthNames = [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ];
        var days = ['Minggu', 'Senin', 'Selasa', 'Rabu', 'Kamis', 'Jumat', 'Sabtu'];
                       
        var dayName = days[today.getDay()]
        var month_Name = monthNames[today.getMonth()];
        var y = today.getYear() + 1900;
        var d = today.getDate();
        var h = today.getHours();
        var m = today.getMinutes();
        var s = today.getSeconds();
        m = checkTime(m);
        s = checkTime(s);
        document.getElementById('tglSekarang').innerHTML = dayName + ", " + d + " " + month_Name + "  " + y;
        document.getElementById('waktuSekarang').innerHTML = h + ":" + m + ":" + s;
        var t = setTimeout(startTime, 500);
    }

    function checkTime(i) {
        if (i < 10) {i = "0" + i};  // add zero in front of numbers < 10
        return i;
    }

    Date.prototype.getMonthName = function() {
        return monthNames[today.getMonth()];
    }
</script>

Selesai. Coba run script tadi di browser kalian. Berjalan sesuai dengan jam local kalian. Nah untuk fungsi checkTime itu hanya mengecek apakah nilai di bawah 10 ? jaka ya akan ditambahkan angka Nol (0) di depannya.



Terima kasih,
Semoga Bermanfaat