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