Cara Membuat Jam Digital Dengan Javascript
Di artikel kali ini saya akan membahas mengenai Cara Merancang Jam Digital Dengan Javascript. Pastinya sobat pernah mempunyai jam Digital atau jam Analog, namun disini saya tak akan membahas perbedaan dari keduanya. Baiklah seketika saja kita membangun Jam Digital dengan Javascript, yuk ikutin strategi berikut ini.
Pertama-tama bikin file HTML seperti kemudian ketikkan code dibawah ini:
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=UTF-8>
<title>Merancang Jam Digital</title>
<link rel=stylesheet href=style.css>
</head>
<body onload=startTime()>
<div id =watch></div>
Di code diatas saya sisipkan manfaat onload yang berhubungan dengan waktu(Time), dan sebuah element div yang diberikan sebuah id=”watch”.
Berikutnya berikan style CSS agar tampilan lebih cantik seperti code dibawah ini:
@import url('https://fonts.googleapis.com/css?family=UnifrakturCook:700display=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;
}Bila telah dilanjutkan menambahkan script dari javascript bagi membangun 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 telah diketikkan, kemudian jalankan di browser masing-masing lalu lihat hasilnya.
Demikian yang dapat saya berikan pada pembahasan Cara Merancang Jam Digital Dengan Javascript. Semoga bermanfaat serta selamat mencoba.
terima kasih.
Sumber https://kursuswebsite.org
