HTML Tutorial
August 30, 2018
Membuat Program Jam Keren dengan HTML
Hallo, ketemu lagi dengan saya di BibipBoy. Sudah lumayan lama juga saya tidak membuat postingan karena masih mencari ide konten terbaru 😄
Pada postingan kali ini kita akan membahas cara membuat program jam digital sederhana menggunakan HTML dan JavaScript.
Tutorial ini cocok untuk kalian yang sedang belajar HTML dasar atau membutuhkan referensi tugas sekolah maupun kuliah.
Tenang saja, caranya cukup mudah. Yuk langsung simak tutorial lengkapnya di bawah ini 👇
Software yang Diperlukan
1
Notepad++
2
Browser seperti Mozilla Firefox atau Google Chrome
Langkah-Langkah
1
Siapkan aplikasi
Notepad++
yang sudah kalian install sebelumnya.
2
Masukkan kode HTML berikut ke dalam Notepad++.
<!DOCTYPE html>
<html>
<head>
<title>Program Jam Sederhana</title>
<script type="text/javascript">
window.setTimeout("renderDate()",1);
days = new Array("Minggu","Senin","Selasa","Rabu","Kamis",
"Jumat","Sabtu");
months = new Array("Januari","Februari","Maret",
"April","Mei","Juni","Juli","Agustus","September",
"Oktober","November","Desember");
function renderDate(){
var mydate = new Date();
var year = mydate.getYear();
if (year < 2000) {
if (document.all)
year = "19" + year;
else
year += 1900;
}
var day = mydate.getDay();
var month = mydate.getMonth();
var daym = mydate.getDate();
if (daym < 10)
daym = "0" + daym;
var hours = mydate.getHours();
var minutes = mydate.getMinutes();
var seconds = mydate.getSeconds();
var dn = "AM";
if (hours >= 12) {
dn = "PM";
hours = hours - 12;
}
if (hours == 0)
hours = 12;
if (minutes <= 9)
minutes = "0" + minutes;
if (seconds <= 9)
seconds = "0" + seconds;
document.getElementById("jam").innerHTML =
"<B>" + days[day] + " " + daym + " " +
months[month] + " " + year + "</B> | " +
hours + ":" + minutes + ":" + seconds + " " + dn;
setTimeout("renderDate()",1000)
}
</script>
</head>
<body onLoad="renderDate()">
<center>
<div id="jam"
style="background: green;
border: 1px dashed #000;
padding: 30px;
width: 700px;"
align="center">
</div>
</center>
</body>
</html>
3
Simpan file tersebut dengan nama bebas menggunakan format
.html.
Contoh:
Contoh:
jamdigital.html
4
Setelah file berhasil disimpan, jalankan program menggunakan tombol
F5 di Notepad++.
Jika ingin langsung menjalankan di browser:
Jika ingin langsung menjalankan di browser:
• Mozilla Firefox → Ctrl + Alt + Shift + X
• Google Chrome → Ctrl + Alt + Shift + R
• Google Chrome → Ctrl + Alt + Shift + R
Hasil Program
Keterangan Kode
1
Kode warna
merah
digunakan untuk mengganti warna background jam sesuai keinginan kalian.
2
Kode warna
hijau
digunakan untuk mengatur ukuran background jam.
3
Kode warna
biru
digunakan untuk mengatur posisi tampilan jam.
Nah, itulah langkah-langkah membuat program jam digital sederhana menggunakan HTML.
Gimana? Mudah banget, kan? Kalian juga bisa memodifikasi tampilannya agar terlihat lebih keren dan menarik sesuai kreativitas masing-masing.
Sekian postingan BibipBoy kali ini mengenai Membuat Program Jam Keren Dengan HTML .
Semoga artikel ini berguna dan bermanfaat bagi kalian semua.
Terima kasih dan sampai jumpa di artikel berikutnya 🚀
Gimana? Mudah banget, kan? Kalian juga bisa memodifikasi tampilannya agar terlihat lebih keren dan menarik sesuai kreativitas masing-masing.
Sekian postingan BibipBoy kali ini mengenai Membuat Program Jam Keren Dengan HTML .
Semoga artikel ini berguna dan bermanfaat bagi kalian semua.
Terima kasih dan sampai jumpa di artikel berikutnya 🚀
.png)