Pada artikel kali ini saya akan membahas tentang Cara Membuat Jam Digital Dengan Javascript. Tentunya sahabat pernah memiliki jam Digital atau jam Analog, namun disini saya tidak akan membahas perbedaan dari keduanya. Baiklah langsung saja kita membuat Jam Digital dengan Javascript, yuk ikutin langkah-langkah berikut ini.
Pertama buat file HTML seperti kemudian ketikkan code dibawah ini:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Membuat Jam Digital</title>
<link rel="stylesheet" href="style.css">
</head>
<body onload="startTime()">
<div id ="watch"></div>
Pada code diatas saya sisipkan fungsi onload yang berhubungan dengan waktu(Time), dan sebuah element div yang diberikan sebuah id=”watch”.
Selanjutnya berikan style CSS agar tampilan lebih cantik seperti code dibawah ini:
@import url('https://fonts.googleapis.com/css?family=UnifrakturCook:700&display=swap');
body{
background: #000955;
}
#watch{
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
color:#FFFB00;
font-family: 'UnifrakturCook', cursive;
letter-spacing: 7px;
font-weight: bold;
font-size:10rem;
}
Jika sudah dilanjutkan menambahkan script dari javascript untuk membuat function jam digital seperti berikut:
function startTime(){
var today =new Date();
var h =today.getHours();
var m =today.getMinutes();
var s =today.getSeconds();
m = checkTime(m);
s = checkTime(s);
document.getElementById('watch').innerHTML =
h + ":" + m + ":" + s;
var t =setTimeout(startTime, 500);
}
function checkTime(i){
if(i<10) {i = "0" + i};
return i;
}
Jangan lupa simpan code yang sudah diketikkan, kemudian jalankan pada browser masing-masing lalu lihat hasilnya.
Demikian yang bisa saya berikan dalam pembahasan Cara Membuat Jam Digital Dengan Javascript. Semoga bermanfaat serta selamat mencoba.
terima kasih.
The post Cara Membuat Jam Digital Dengan Javascript appeared first on Kursus Website Terbaik.