Ingin jam digital seperti di atas? Ya. Jika iya, maka Anda sudah tepat membaca tulisan di blog Rifaus.ID ini.
Langkah Langkah membuat Jam digital menggunakan bahasa CSS, HTML dan Javascript
1. Buka Text editor anda (notepad, sublime text, geany dll)
2. Setelah anda membuka text editor anda silahkan ketikan script di bawah ini.
<html>
<head>
<title>Say Hello To Jam</title>
<script type="text/javascript">
window.setTimeout("waktu()",1000);
function waktu() {
var tanggal = new Date();
setTimeout("waktu()",1000);
document.getElementById("jam").innerHTML = tanggal.getHours();
document.getElementById("menit").innerHTML = tanggal.getMinutes();
document.getElementById("detik").innerHTML = tanggal.getSeconds();
}
</script>
</head>
<style>
#jam-digital{overflow:hidden; width:350px}
#hours{float:left; width:100px; height:50px; background-color:#6B9AB8; margin-right:25px}
#minute{float:left; width:100px; height:50px; background-color:#A5B1CB}
#second{float:right; width:100px; height:50px; background-color:#FF618A; margin-left:25px}
#jam-digital p{color:#000; font-size:36px; text-align:center; margin-top:4px}
</style>
<body onLoad="waktu()">
<div id="jam-digital">
<div id="hours"><p id="jam"></p></div>
<div id="minute"><p id="menit"></p></div>
<div id="second"><p id="detik"></p></div>
</div>
</table>
</body>
</html>
3. Pastikan komputer anda sudah terinstal web server seperti XAMPP,WAMPP atau Lampp. Setelah itu silahkan jalankan di web browser anda menggunakan web server anda. dengan mengetikan localhost/lokasifolderfileanda.php
4. Tampilan dari jam digital kurang lebih akan seperti gambar di bawah ini semoga dapat bermanfaat dan menambah wawasan dan pengetahuan pengunjung sekalian.
Selesai.:
Semoga bermanfaat
Sumber : http://www.jooinfoo.com/2018/05/cara-membuat-jam-digital-dengan-html-js-css.html
0 comments:
Post a Comment