Cara Membuat Jam Digital Menggunakan Javascript dan CSS

Halo teman teman pada kesempatan kali ini saya akan berbagi tutorial tentang Cara Membuat Jam Digital Menggunakan Javascript dan CSS, mungkin teman teman sudah tidak asing lagi yang namanya jam digital Cara Membuat Jam Digital Menggunakan Javascript dan CSS tidaklah sulit cukup mengetahui step by step nya saja.

Jam digital berfungsi juga untuk menampikan sebuah informasi waktu, didalam website jam digital berfungsi untuk menampilkan informasi waktu untuk pengunjung yang ingin mengunjungi website kita
Pada jam digital menggunakan javascript dan CSS ini jam yang ditampilkan pada layar browser sesuai dengan jam yang ada pada komputer teman teman, pada jam digital yang ingin saya buat ini berupa jam, menit, dan detik.

Sebenarnya untuk cara pembuatan jam digital nya saja dengan menggunakan javascript itu juga sudah bisa tapi untuk mempercantik tampilan jam kita nanti kita akan menggunakan juga yang namanya CSS (Casecading Style Sheet), yaitu merupakan sebuah bahasa desain web (Style Sheet Language) yang berfungsi untuk mengatur ataupun mengontrol tampilan sebuah layout atau tampilan, dan itu bisa berupa warna tampilan background dan yang lainya.

Oke teman teman kita langsung saja, berikut Cara Membuat Jam Digital Menggunakan Javascript dan CSS

Silahkan teman teman teman buka sebuah text editor seperti : Notpet++ , Adobe Dreamweaver, Sublime Text, ataupun yang lainnya.
Kemudian silahkan teman teman simpan script dibawah ini pada text editor yang telah teman teman buka.

<!DOCTYPE html>
<html>
<head>
<title>Cara Membuat Jam Digital Menggunakan Javascript dan CSS</title>
<script type="text/javascript">
 window.onload = function() { jam(); }

 function jam() {
  var e = document.getElementById('jam'),
  d = new Date(), h, m, s;
  h = d.getHours();
  m = set(d.getMinutes());
  s = set(d.getSeconds());

  e.innerHTML = h +':'+ m +':'+ s;

  setTimeout('jam()', 1000);
 }

 function set(e) {
  e = e < 10 ? '0'+ e : e;
  return e;
 }
</script>
</head>
<body>
<center>
<h1 style="font-size: 100px; font-family: arial; color:#FFF; background:red" id="jam"></h1>
</center>
</body>
</html>

Kemudian Save AS dengan nama Cara Membuat Jam Digital Menggunakan Javascript dan CSS.html

Silahkan jalankan pada browser teman teman maka hasil nya seperti dibawah ini.

Bagai mana teman teman Cara Membuat Jam Digital Menggunakan Javascript dan CSS nya ? cukup mudah bukan ?

Sekian tutorial dari saya mengenai Cara Membuat Jam Digital Menggunakan Javascript dan CSS, semoga bermanfaat.

Terimakasih.

Cara Membuat Jam Digital Menggunakan Javascript dan CSS

Kategori