Membuat Jam Digital dengan Javascript dan CSS

source code dapat di copy dengan mengarahkan cursor ke area source code kemudian mengklik tombol dengan icon kertas putih dan <>
Untuk dapat menampilkan informasi waktu pada halaman website, kita memerlukan Client Side Scripting seperti Javascript karena pada dasarnya, informasi waktu yang ditampilkan adalah sesuai dengan yang ada dikomputer yang menjalankan script tersebut. Jika script tersebut dijalankan dikomputer lokal maka informasi waktu yang ditampilkan sesuai dengan yang ada di komputer tersebut. 

Sebenarnya hanya dengan Javascript saja, kita sudah bisa menampilkan jam digital tapi untuk mempercantiknya kita memerlukan CSS. Disini saya akan berbagi trik Bagaimana Membuat Jam Digital dengan Javascript dan CSS.
Membuat Jam Digital dengan Javascript dan CSS
1. Buat Sebuah File HTML dengan nama jam.html Kemudian tambahkan code CSS yang isinya Sebagai Berikut
<style type="text/css">
#output{
font-size:200px;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
text-align:center;
margin-top:13%;
color:#666;
}
</style>

2. Tambahkan juga code Javascript yang isinya sebagai berikut
<script type="text/javascript">
    window.setTimeout("waktu()",1000);    
    function waktu() {     
    var tanggal = new Date();    
    setTimeout("waktu()",1000);    
    document.getElementById("output").innerHTML = tanggal.getHours()+":"+tanggal.getMinutes()+":"+tanggal.getSeconds();  
    }   
</script>

3. Agar Hasilnya Kelihatan, Tambahkan Code Berikut yang bertujuan untuk menampilkan hasil atau Outputnya 
<div id="output"></div>
source code dapat di copy dengan mengarahkan cursor ke area source code kemudian mengklik tombol dengan icon kertas putih dan <>

Share this

Related Posts

Previous
Next Post »

bantu kami untuk lebih baik; jika ada hal yang kurang jelas atau broken link silahkan masukan komentar anda kami akan segera menanggapi dan memperbaikinya. login ke akun gmail anda untuk menampilkan form komentar.