1. Digital Clock
<!DOCTYPE html>
<html>
<head>
<title>Membuat Jam Digital Menggunakan Javascript</title>
</head>
<body>
<style>
h1,h2,p,a{
font-family: sans-serif;
font-weight: normal;
}
.jam-digital {
overflow: hidden;
width: 330px;
margin: 20px auto;
border: 5px solid #efefef;
}
.kotak{
float: left;
width: 110px;
height: 100px;
background-color: #189fff;
}
.jam-digital p {
color: #fff;
font-size: 36px;
text-align: center;
margin-top: 30px;
}
</style>
<center>
<h1>Jam Digital </h1>
</center>
<div class="jam-digital">
<div class="kotak">
<p id="jam"></p>
</div>
<div class="kotak">
<p id="menit"></p>
</div>
<div class="kotak">
<p id="detik"></p>
</div>
</div>
<script>
window.setTimeout("waktu()", 1000);
function waktu() {
var waktu = new Date();
setTimeout("waktu()", 1000);
document.getElementById("jam").innerHTML = waktu.getHours();
document.getElementById("menit").innerHTML = waktu.getMinutes();
document.getElementById("detik").innerHTML = waktu.getSeconds();
}
</script>
</body>
</html>
2. Analog Clock
<!DOCTYPE html>
<html>
<head>
<title>Membuat Jam Analog Menggunakan Javascript</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<style type="text/css">
h1,h2,p,a{
font-family: sans-serif;
font-weight: normal;
}
.jam_analog {
background: #e7f2f7;
position: relative;
width: 240px;
height: 240px;
border: 16px solid #52b6f0;
border-radius: 50%;
padding: 20px;
margin:20px auto;
}
.xxx {
height: 100%;
width: 100%;
position: relative;
}
.jarum {
position: absolute;
width: 50%;
background: #232323;
top: 50%;
transform: rotate(90deg);
transform-origin: 100%;
transition: all 0.05s cubic-bezier(0.1, 2.7, 0.58, 1);
}
.lingkaran_tengah {
width: 24px;
height: 24px;
background: #232323;
border: 4px solid #52b6f0;
position: absolute;
top: 50%;
left: 50%;
margin-left: -14px;
margin-top: -14px;
border-radius: 50%;
}
.jarum_detik {
height: 2px;
border-radius: 1px;
background: #F0C952;
}
.jarum_menit {
height: 4px;
border-radius: 4px;
}
.jarum_jam {
height: 8px;
border-radius: 4px;
width: 35%;
left: 15%;
}
</style>
<center>
<h1>Jam Analog</h1>
</center>
<div class="jam_analog">
<div class="xxx">
<div class="jarum jarum_detik"></div>
<div class="jarum jarum_menit"></div>
<div class="jarum jarum_jam"></div>
<div class="lingkaran_tengah"></div>
</div>
</div>
<script type="text/javascript">
const secondHand = document.querySelector('.jarum_detik');
const minuteHand = document.querySelector('.jarum_menit');
const jarum_jam = document.querySelector('.jarum_jam');
function setDate(){
const now = new Date();
const seconds = now.getSeconds();
const secondsDegrees = ((seconds / 60) * 360) + 90;
secondHand.style.transform = `rotate(${secondsDegrees}deg)`;
if (secondsDegrees === 90) {
secondHand.style.transition = 'none';
} else if (secondsDegrees >= 91) {
secondHand.style.transition = 'all 0.05s cubic-bezier(0.1, 2.7, 0.58, 1)'
}
const minutes = now.getMinutes();
const minutesDegrees = ((minutes / 60) * 360) + 90;
minuteHand.style.transform = `rotate(${minutesDegrees}deg)`;
const hours = now.getHours();
const hoursDegrees = ((hours / 12) * 360) + 90;
jarum_jam.style.transform = `rotate(${hoursDegrees}deg)`;
}
setInterval(setDate, 1000)
</script>
</body>
</html>
