Assalamualaikum sob kali ini aku mau membagikan script atau tutorial cara membuat jam di website dengan menggunakan HTML, CSS, dan Javascript.
Jam apakah yang akan kita buat kali ini?, kali ini aku mau membuat jam analog, yah hasil dari tutorial youtube sih, kali ini aku membagikan script nya aja yah sob.
Jadi jika ada yang bertanya apa itu Javascript?, javascript adalah bahasa pemograman tingkat tinggi sob,
Kalo html dan css apa?, yah cari aja di google yah sob wkwkwkwk,
oke langsung saja aku bagikan scriptnya:
1.Pertama kalian membuat file dengan nama index.html lalu isikan script berikut:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="wrapper">
<div class="clock">
<div class="needle_second"></div>
<div class="needle_minute"></div>
<div class="needle_hour"></div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
Lalu save dengan cara tekan ctrl + s atau bisa langsung save as dari kode editor
masing - masing.
2.Kemudian buat file style.css untuk script css nya, script nya seperti berikut:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
.wrapper {
width: 100%;
height: 100vh;
background-color: #eee;
display: flex;
justify-content: center;
align-items: center;
}
.clock {
width: 620px;
height: 620px;
border-radius: 50%;
box-shadow: inset 2px 15px 20px rgba(0, 0, 0, 0.2), inset -10px -10px 15px
rgba(255, 255, 255, 0.8), 8px 15px 15px rgba(0, 0, 0, 0.2);
border: 15px solid #99999911;
position: relative;
display: flex;
justify-content: center;
align-items: center;
transform-origin: center center;
}
.clock::before {
content: '';
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #f8b400;
z-index: 10;
box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.2), inset -5px -5px 5px
rgba(255, 255, 255, 0.2), 3px 5px 5px rgba(0, 0, 0, 0.2);
}
.needle_second {
position: absolute;
width: 5px;
height: 250px;
background: #001e6c;
transform: rotate(0deg) translate(0, -50%);
border-radius: 40px;
z-index: 1;
transform-origin: center center;
}
.needle_second::before {
content: '';
position: absolute;
width: 12px;
height: 12px;
border-radius: 50%;
background: #001e6c;
left: 50%;
transform: translateX(-50%);
}
.needle_minute {
position: absolute;
width: 10px;
height: 240px;
border-radius: 90% 90% 10px 10px;
background: #2b7a0b;
transform: rotate(0deg) translate(0, -50%);
transform-origin: center center;
box-shadow: 0px 50px 0 3px #2b7a0b;
}
.needle_hour {
position: absolute;
width: 10px;
height: 200px;
transform: rotate(0deg) translate(0, -50%);
transform-origin: center center;
border-radius: 90% 90% 10px 10px;
background: #ff1e00;
box-shadow: 0px 50px 0 3px #ff1e00;
}
.clock .clock-points {
position: absolute;
width: 10px;
height: 2px;
background: #f8b400;
transform: rotate(calc(var(--i) * 6deg)) translate(270px);
transform-origin: top center;
font-size: 25px;
font-weight: bold;
}
Setelah save, cara save nya sama seperti file yang sebelumnya yah sob.
3.Lalu buat file script.js untuk membuat file javascript nya sob, kode nya seperti
dibawah ini :
const clock = document.querySelector('.clock');
const needle_second = document.querySelector('.needle_second');
const needle_minute = document.querySelector('.needle_minute');
const needle_hour = document.querySelector('.needle_hour');
const halfClockTimes = [5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60];
for (let i = 0; i < 60; i++) {
const span = document.createElement('span');
span.classList.add('clock-points');
span.style.cssText = '--i:' + i;
halfClockTimes.map((halfTime) => {
i === halfTime ? (span.style.width = '25px') : span;
});
if (i === 45) {
addStyles(span, 12);
span.style.transform = 'rotate(0deg) translateY(-270px)';
span.style.marginTop = '-25px';
span.style.marginRight = '-5px';
}
if (i === 30) {
addStyles(span, 09);
span.style.transform = 'rotate(0deg) translateX(-270px)';
span.style.marginTop = '-30px';
}
if (i === 0) {
addStyles(span, 03);
}
if (i === 15) {
addStyles(span, 06);
span.style.transform = 'rotate(0deg) translateY(270px)';
span.style.marginLeft = '10px';
}
clock.appendChild(span);
}
function addStyles(span, digit) {
span.style.background = 'none';
span.style.marginTop = '-20px';
span.innerHTML = digit;
}
function handleClock() {
let date = new Date();
let hours = date.getHours();
let minutes = date.getMinutes();
let seconds = date.getSeconds();
needle_second.style.transform = `rotate(${seconds * 6}deg) translate(0,-50%)`;
needle_minute.style.transform = `rotate(${minutes * 6}deg) translate(0,-50%)`;
needle_hour.style.transform = `rotate(${hours * 30 + minutes / 2}deg)
translate(0,-50%)`;
console.log(hours, minutes, seconds);
}
setInterval(handleClock, 1000);
Lalu save sob.
4.Kemudian buka di browser yah sob, seperti gambar dibawah ini:
Nah seperti itu yah sob hasilnya, Semoga bermanfaat yah sob kurang lebih nya gua mohon
maaf sob, wassalamualaikum wr wb
Komentar
Posting Komentar