Bagaimana langkah-langkah membuat simpel jam digital menggunakan javascript itu? Silahkan sobat perhatikan langkah yang saya berikan dan coba praktekan. Dan yang saya inginkan sobat tidak meng-copy paste kode-kodenya. Tetapi alangkah baiknya sobat menulis kode tersebut. karna dengan menulis, itu akan memudahkan sobat semua mengingat dan mengerti jika ada bug pada kode yang kalian buat.
Tentunya peran utama dari pembuatan jam digital ini adalah bahasa javascript, kode program yang untuk membuatnya adalah sebagai berikut :
<script type="text/javascript">
window.setTimeout("waktu()", 1000);
function waktu(){
var tanggal = new Date();
setTimeout("waktu()", 1000);
document.getElementById('jam').innerHTML= tanggal.getHours()+" : "+tanggal.getMinutes()+" : "+tanggal.getSeconds();
}
</script>
Terdapat script window.setTimeout("waktu()", 1000); yang berfungsi untuk memanipulasi tampilan dari documnet html dengan object setTimeout agar menampilkan hasil dari fungsi waktu() dengan interval 1000 milidetik atau 1 detik. Sebuah function dengan nama waktu() ini yang nanti akan mengeksekusi object date dari inisial variabel tanggal. kemudian setTimeout untuk mengatur perubahan nilai dari output yang ditampilkan setiap 1 detik dengan acuan date. document.getElementbyId('jam').innerHTML untuk menampilkan data jam, menit, detik pada atrribut id dengan nama jam. Jadi ketika kita inginSebagai menampilkan jam tersebut harus membuat sebuah tag element dengan id = jam ... sebagai contoh saya membuat div dengan atrribut id seperti dibawah in.
<div id="jam"></div>
Div dengan attribut id = jam inilah yang nanti akan menampilkan waktu sesuai dengan script yang sudah dibuat. Berikut full kode untuk membuat jam digital sederhana :
<!-- membuat jam contoh -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Jam Digital</title>
<script type="text/javascript">
window.setTimeout("waktu()", 1000);
function waktu(){
var tanggal = new Date();
setTimeout("waktu()", 1000);
document.getElementById('jam').innerHTML= tanggal.getHours()+" : "+tanggal.getMinutes()+" : "+tanggal.getSeconds();
}
</script>
</head>
<body>
<div id="jam"></div>
</body>
</html>
Simpan dengan nama jam.html atau terserah sob. Pada kode syntax diatas akan menghasilkan tampilan jam digital sederhana, dan tampilannya agak biasa. Tapi bagaimana jika kita ingin agar tampilan jam tersebut seperti gambar yang ada diatas. sobat harus menambahkan kode css untuk memperindah tampilan fontnya agar mirip dengan jam digital. silahkan sobat tulis kode ini di bawah tag </title>, Sehingga menjadi seperti berikut :
<title>jam Digital</title>
<style type="text/css">
#jam{
font-size:200px;
font-family:"Rockwell Condensed", Arial, Helvetica, sans-serif;
background: #5FB7EB;
text-align:center;
margin-top:13%;
color: #000000;
}
</style>
Kode style diatas akan membuat tampilan dari web kita akan menjadi seperti gambar diatas.
Nah itulah tadi sedikit ilmu yang saya share, perlu diketahui bahwa kode diatas secara default akan mengikuti waktu sesuai pada sistem operasi sobat. oke semoga postingan saya kali ini bermanfaat.dan pesan saya teruslah mencoba dan berusaha sob, jangan berhenti untuk belajar. Sekian dari saya, jangan lupa comment dan salam blogger... :D
Wah kayaknya keren nih kalo bok saya dipake ini. ijin save ya kode nya.
ReplyDeletekeren gan..izin coba ya
ReplyDelete