Assalammualaikum Wr. Wb.
Sering suatu situs menampilkan waktu dan tanggal secara otomatis, dan waktunya juga berjalan otomatis. sebenarnya itu mudah dan tidak banyak script yang di gunakan. Pada tutorial kali ini terbagi dua, yang pertama menampilkankan waktu yang kedua menampilkan tanggal (Time and Date).
Sebenarnya untuk source codenya banyak variasinya, tapi yang akan tampilkan adalah yang paling singkat. Dan tidak perlu menggunakan jquery.
Waktu (Time)
Waktu yang dalam bahasa inggrisnya time, menampilkan jam, menit dan detik.
JS
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('time').innerHTML=curr_hour + ":" + curr_minute + ":" + curr_second + " " + a_p;
}
function checkTime(i) {
if (i < 10) {
i = "0" + i;
}
return i;
}
setInterval(showTime, 500);
source code di atas merupakan code untuk menampilkan waktu yang di ambil dari mesin (sistem komputer). pertama di inisialaisasi terlebih dahulu jam, tanggal dan waktu. lalu di berikan pengandaian jika jam yang di ambil dari sistem kurang dari 12 maka akan diberikan "AM" di belakangnya dan sebaliknya jika tidak akan di tambah "PM" di belakangnya. Selanjutnya karena yang akan ditampilkan adalah format AM dan PM, maka hanya menampilkan format 12 jam. Lalu selanjutnya agar dapat di tampilkan di HTML maka di buat dengan variabel id 'item' . Yang mana variabel id item tersebut untuk menampilkan jam, menit dan detik. itu penjelasan sedikit tentang source codenya.
HTML
<html>
<head>
<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('time').innerHTML=curr_hour + ":" + curr_minute + ":" + curr_second + " " + a_p;
}
function checkTime(i) {
if (i < 10) {
i = "0" + i;
}
return i;
}
setInterval(showTime, 500);
</script>
</head>
<body>
<div id="time"></div>
</body>
</html>
jadi untuk menampilkan jam, di buat terlebih dahulu struktur HTML nya lalu letak script tadi di bagian head. dan untuk memanggil script yang telah di buat gunakan div dengan id="time"
Running
jika ingin lebih menarik bisa di tambahkan CSS sendiri. Karena format jpg jadi detiknya tidak bergerak.
Tanggal (Date)
Tanggal yang dalam bahasa inggrisnya date, menampilkan tanggal dan bulan.
JS
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();
document.getElementById("date").innerHTML =" " + day + " " + months[month];
untuk mengambil tanggal konsepnya juga sama dengan mengambil waktu, pertama dilakukan inisialaisasi selanjutnya mengambil data tanggal dan bulan ke mesin (sistem komputer). lalu di buat dalam variabel id="date".
HTML
<html>
<head>
</head>
<body>
<div id="date"></div>
<script>
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();
document.getElementById("date").innerHTML =" " + day + " " + months[month];
</script>
</body>
</html>
perbedaannya pada time adalah cara pemanggilan id nya, untuk mengambil date letakkan scriptnya di bawah id pemanggilan.
Running
jika ingin lebih menarik bisa di tambahkan CSS sendiri.
Jika di gabungkan maka source codenya:
<html>
<head>
<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('time').innerHTML=curr_hour + ":" + curr_minute + ":" + curr_second + " " + a_p;
}
function checkTime(i) {
if (i < 10) {
i = "0" + i;
}
return i;
}
setInterval(showTime, 500);
</script>
</head>
<body>
<div id="time"></div>
<div id="date"></div>
<script>
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();
document.getElementById("date").innerHTML =" " + day + " " + months[month];
</script>
</body>
</html>
dan di running akan menampilkan waktu dan tanggal (time and date).
terimakasih telah melihat tutorial dari saya, nantikan tutorial selanjutnya dari saya.
