Tanggal dan waktu/jam dapat dimunculkan dengan javascript. Kode yang digunakan untuk memunculkannya tidaklah terlalu rumit serta kode ini dapat digunakan sebagai sturktur dasar dalam membuat jam digital.

Menampilkan Tanggal dan Waktu saat ini dengan Javascript - MKR site | Berbagi Tanpa Batas, Blogger Tips, Widget, Template

Tanggal dan waktu/jam dapat dimunculkan dengan javascript. Kode yang digunakan untuk memunculkannya tidaklah terlalu rumit serta kode ini dapat digunakan sebagai sturktur dasar dalam membuat jam digital.

Menampilkan Tanggal dan Waktu saat ini dengan Javascript

JPStation Responsive Blogger Template by MKR

Sesuai dengan judul dari artikel ini, kali ini saya akan membagikan script untuk menampilkan tanggal dan waktu saat ini. Tanggal dan waktu ini dapat ditampilkan dengan menggunakan Javascript atau jQuery. Dan script ini dapat digunakan untuk membuat waktu/jam digital.
Berikut ini script-scriptnya.

Tanggal saat ini:

Tanpa Nama Hari

<script type='text/javascript'>
<!--
var months = ['Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'];
var date = new Date();
var day = date.getDate();
var month = date.getMonth();
var yy = date.getYear();
var year = (yy < 1000) ? yy + 1900 : yy;
document.write(day + " " + months[month] + " " + year);
//-->
</script>

Dengan Nama Hari

<script type='text/javascript'>
<!--
var months = ['Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'];
var myDays = ['Minggu', 'Senin', 'Selasa', 'Rabu', 'Kamis', 'Jum&#39;at', 'Sabtu'];
var date = new Date();
var day = date.getDate();
var month = date.getMonth();
var thisDay = date.getDay(),
    thisDay = myDays[thisDay];
var yy = date.getYear();
var year = (yy < 1000) ? yy + 1900 : yy;
document.write(thisDay + ', ' + day + ' ' + months[month] + ' ' + year);
//-->
</script>

Waktu/Jam saat ini (pasif)

Format 24

<script type="text/javascript">
<!--
var d = new Date();
var curr_hour = d.getHours();
var curr_min = d.getMinutes();
curr_min = curr_min + "";
if (curr_min.length == 1) {
    curr_min = "0" + curr_min;
}
document.write(curr_hour + " : " + curr_min);
//-->
</script>

Format AM/PM

<script type="text/javascript">
<!--
var a_p = "";
var d = new Date();
var curr_hour = d.getHours();
if (curr_hour < 12) {
    a_p = "AM";
} else {
    a_p = "PM";
}
if (curr_hour == 0) {
    curr_hour = 12;
}
if (curr_hour > 12) {
    curr_hour = curr_hour - 12;
}

var curr_min = d.getMinutes();
curr_min = curr_min + "";
if (curr_min.length == 1) {
    curr_min = "0" + curr_min;
}
document.write(curr_hour + " : " + curr_min + " " + a_p);
//-->
</script>

Karena ini merupakan jam pasif sehingga waktu/jam yang muncul merupakan waktu pada saat halaman ini di akses.

Waktu/Jam saat ini (aktif)

Format 24

<div id="clock"></div>
<script type="text/javascript">
<!--
function startTime() {
    var today=new Date(),
        curr_hour=today.getHours(),
        curr_min=today.getMinutes(),
        curr_sec=today.getSeconds();
 curr_hour=checkTime(curr_hour);
    curr_min=checkTime(curr_min);
    curr_sec=checkTime(curr_sec);
    document.getElementById('clock').innerHTML=curr_hour+":"+curr_min+":"+curr_sec;
}
function checkTime(i) {
    if (i<10) {
        i="0" + i;
    }
    return i;
}
setInterval(startTime, 500);
//-->
</script>

Format AM/PM

<div id="clock"></div>
<script type="text/javascript">
<!--
function showTime() {
    var a_p = "";
    var today = new Date();
    var curr_hour = today.getHours();
    var curr_minute = today.getMinutes();
    var curr_second = today.getSeconds();
    if (curr_hour < 12) {
        a_p = "AM";
    } else {
        a_p = "PM";
    }
    if (curr_hour == 0) {
        curr_hour = 12;
    }
    if (curr_hour > 12) {
        curr_hour = curr_hour - 12;
    }
    curr_hour = checkTime(curr_hour);
    curr_minute = checkTime(curr_minute);
    curr_second = checkTime(curr_second);
 document.getElementById('clock').innerHTML=curr_hour + ":" + curr_minute + ":" + curr_second + " " + a_p;
    }

function checkTime(i) {
    if (i < 10) {
        i = "0" + i;
    }
    return i;
}
setInterval(showTime, 500);
//-->
</script>

Satank Mkr Beri Komentar
Bagikan kepada teman!
Garis

18 comments:

  1. Maksih bang kunjungi blog ane..
    =p~
    http://yuby-idea.blogspot.com/

    BalasHapus
  2. kerena banget tutorial nya bang...!!! saya save dulu untuk dipelajari lebih lanjut. makasih

    BalasHapus
  3. Hi friend! i need some help in my template... i want to make it responsive template...
    so can you help me or do you know great designer like you who can edit my template and make it responsive?
    this is a demo for my template :
    http://arabictemplateslab.blogspot.com/
    and in the end can you send to me a list for best Indonesians blogs talk about blogger because I'm really surprised from the Indonesians bloggers and designers :) Thanks very much...

    BalasHapus
    Balasan
    1. try to go here:
      http://www.dte.web.id
      you can learn more about blogger, CSS, JS and more..

      Hapus
    2. Terimakasih atas infonya gan

      Hapus
  4. sip, telah saya terapkan di blog saya http://pulsappreload.blogspot.com

    BalasHapus
  5. agan mkr, gimana caranya menggabungkan hari tanggal dan jamnya secara bersamaan ? blog saya yg ini : http://sumatracyber.blogspot.com/ coz di blog saya bisa tap cara menggabungkannya saya tidak tau.. mohon bantuannya :D

    BalasHapus
  6. thanks gan , ane udah pasang

    BalasHapus
  7. makasih tips nya gan, kalo mau digabung tanggal dan waktu dalam satu baris gimana ya...? (seperti = minggu, 8 September 2013 | 10:10:10)

    BalasHapus
  8. Gan setelah saya coba2 cara menggabungkan script tanggal dan jam agar tampil dalam satu baris secara bersamaan, saya gunakan tabel tr td dan itu berhasil. mungkin ada cara/trik lain dari agan2 yang lain...

    BalasHapus
  9. om cara pasang pas sebelum About di http://pcfreesoftwarez.blogspot.com/ untuk hari tanggal waktu berjalan,, makasih sebelumnya.. salam :)

    BalasHapus
  10. Thank ya gan untuk informasi script hari dan tanggalnya, yang sekalian jamnya gimana gan?

    BalasHapus
  11. Ohh, jadi gitu yaaa caranya :) makasih sob informasinya :)
    http://goo.gl/2y0u43

    BalasHapus
  12. Mas, bagaimana jika saya ingin menampilkan Tanggal, bulan, tahun dan waktu (aktif)? Terimakasih

    BalasHapus

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA DI SINI...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

NB: Jangan menuliskan link aktif karena akan terhapus secara automatis.

Jika ingin menuliskan komentar yang keluar dari topik pada artikel ini silahkan kehalaman OOT (out of topic) dengan menekan tombol OOT di bawah

 
Design by MKR Copyright © 2012 ~ 2013 Powered by Blogger
TOP