Senin, 07 April 2014

MENAMPILAKAN WAKTU DAN TANGGAL DI HTML DENGAN JAVASCRIPT


Kali ini saya akan sedikit berbagi pengetahuan,bagaimana caranya kita menampilkan waktu dan tanggal di html.Oke langsung kita saja ke tkp.....

Kopikan Script di bawah tag <head> </head> atau <body> </body>.

 
  1. Waktu Pasif/tidak bergerak format 24 jam.

<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
 
   2. Waktu Pasif/tidak bergerak format 12 Jam
 
<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>
 
  

   3.  Waktu aktif/bergerak format 24 jam.

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

    4.    Waktu  aktif format 12 jam.

<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>
 
 
   5.  Tanggal 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>
 
 
   6.  Tanggal 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>
 
 
Silahkan dan selamat mencoba :)   



Tidak ada komentar:

Posting Komentar