Cara Menampilkan Jam, Hari & Tanggal dengan Javascript. - Info Desain Web Terbaru!
Info Desain Web Terbaru!
4 Kang Rian 11/13/2013 07:07:00 PM Cara Menampilkan Jam, Hari & Tanggal dengan Javascript. Cara Menampilkan Jam, Hari & Tanggal dengan Javascript.

Cara Menampilkan Jam, Hari & Tanggal dengan Javascript.

Oleh. Kang Rian  •  23  •      Edit
Cara Menampilkan Jam, Hari & Tanggal dengan Javascript.
Cara Menampilkan Jam, Hari & Tanggal dengan Javascript.
Icon Waktu dan Tanggal Kesempatan oh Kesempatan .. alhamdulillah akhirnya ada kesempatan juga buat sharing lagi! . kali ini saya ingin berbagi pengetahuan seputar bumbu Javascript.. tentang "Bagaimana Cara Menampilkan Jam dan Tanggal dan Hari dengan JavasScript" ..

Berikut Pilihan Javascript untuk Menampilkan Jam / Tanggal / Hari , sesuai dengan kebutuhan sobat :

Cara Menampilkan Tanggal dengan Javascript :


<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>
Hasilnya :

Cara Menampilkan Hari dan Tanggal dengan Javascript :

<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>
Hasilnya :

Cara Menampilkan Jam saat ini! dengan Javascript ( Pasif ) :

<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>
Hasilnya :

Dengan 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>

Hasilnya :

Cara Menampilkan Jam saat ini! dengan Javascript ( Aktif ) :

<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>
Hasilnya :

Silahkan berikan komentar jika ada pertanyaan :)

Baca Juga :

Kang Rian Ikuti

Web & Graphic Designer - Berpengalaman sejak 2010, fokus membantu Perusahaan / UMKM agar dikenal secara Global melalui Website Profesional & Desain yg Menjual.

Cek. Jasa-Design.web.id

 

23 komentar

  1. Pertamax di amankan! :cendol

    BalasHapus
  2. teu pertamax ge wios ah, da nganggo lisah taneh ge bisa.hahah.

    saya ge tos nganggo script ieu kang. manteuuup beud. :D

    BalasHapus
    Balasan
    1. ih kang ridho alay beuuuuddd :hammer .. hahaha :ngakak

      Hapus
  3. Hei mas :genit dulu saya sempet bingung sama yg ginian dan akhirnya malah pake h2.date-header :ngakak tapi thanks dah sekarang jadi tau :malu

    BalasHapus
    Balasan
    1. alhamdulillah yah sob :) , akhirnya gak sia-sia juga mampir ke blog kecil saya ini :D

      Hapus
  4. Kunjungan malam , nice nih infonya kang :v

    BalasHapus
  5. Tampilannya keren-keren, bisa docoba nih :)

    BalasHapus
  6. gan naruhnya dimana

    BalasHapus
  7. artikelnya sangat membantu sekali gan, apalagi buat nubi seperti saya.. sangat bermanfaat

    BalasHapus
  8. terimakasih banyak sob buat tutorialnya, sangat keren sekali..

    http://tokoonlineobat.com/

    BalasHapus
  9. Kalo mau menampilkan tanggal tertentu di bulan ini bisa ga mas? Thanks
    Buka Fakta - Blog dengan seribu kemungkinan

    BalasHapus
  10. Thanks mas, ijin coba

    BalasHapus

Terpopular! Minggu ini..

×