Membuat Jam Analog Menggunakan HTML CSS & Javascript

Membuat Jam Analog menggunakan HTML CSS dan Javascript
Halo pembaca, Hari ini di blog ini Anda akan belajar cara Membuat Jam Analog yang
Bekerja menggunakan HTML CSS, dan Javascript. Sebelumnya saya telah membagikan <a
href ="https://www.codingnepalweb.com/responsive-footer-section-html-css/">Menu
Navigasi Responsif dalam CSS HTML</a>. Sekarang saatnya kita mulai membuat jam
analog menggunakan javascript.
Anda dapat mengatakan bahwa JavaScript adalah inti dari halaman web mana pun,
dengan kata lain, tanpa JavaScript, halaman web hanyalah mayat. Kami dapat membuat
begitu banyak program dasar hingga tingkat tinggi hanya menggunakan JavaScript
(tanpa pustaka javascript).
Seperti yang Anda dapat pada gambar, ini adalah Jam Analog menggunakan HTML CSS &
Javascript. Ini adalah jam waktu nyata, bukan boneka. Anda dapat menemukan program
jam, tetapi Anda hanya akan mendapatkan sebagian besar barang CSS. Hanya vektor
jam. Tetapi saya membagikan jam langsung, yang berfungsi sebagai pekerjaan di
javascript.
Jika Anda merasa kesulitan memahami apa yang saya katakan. Anda dapat menonton
video tutorial lengkap pada program ini (Build A Working Analog Clock).
Video Tutorial Jam Analog yang Berjalan di Javascript
Saya harap keraguan Anda sudah jelas sekarang. Seperti yang Anda lihat di video,
ini adalah jam kerja waktu nyata. Kali ini mengambil dari PC Anda, bukan dari
server. Jika Anda merasa kesulitan untuk melakukan kode jam ini, Jangan khawatir
Anda dapat dengan mudah mendapatkan kode sumber Jam Javascript ini dari tautan
unduhan yang diberikan di bawah ini.
Jika Anda menyukai program ini (Bangun Jam Analog yang Berfungsi dengan baik) dan
ingin mendapatkan kode sumber. Anda dapat dengan mudah mendapatkan kode sumber dari
program ini. Untuk mendapatkan kode sumber Anda hanya perlu menggulir ke bawah.
Jam Analog menggunakan Javascript [Kode Sumber]
Untuk membangun proyek ini (Bangun Jam Analog yang Berfungsi dengan baik). Pertama,
Anda perlu membuat dua File satu File HTML dan satu lagi adalah File CSS. Setelah
membuat file-file ini cukup tempel kode berikut di file Anda.
Pertama, buatlah file HTML dengan nama index.html dan tempel kode yang diberikan
kedalam file HTML yang telah dibuat tadi. Ingat, Anda harus membuat file selalu
dengan ekstensi .html.
<!DOCTYPE html>

<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Jam dengan javascript dan HTML</title>
<link rel="stylesheet" href="style.css">
<style id="animasi-jam-analog"></style>
</head>
<body>
<div class="jam_analog">
<div class="center-nut"></div>
<div class="center-nut2"></div>
<div class="indicator">
<div>
</div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="sec-hand"></div>
<div class="min-hand"></div>
<div class="hr-hand"></div>
</div>
<script type="text/javascript" src="./javascript.js"></script>
</body>
</html>
Kedua, buat file javascript dengan nama javascript.js dan tempel kode yang
diberikan di file Javascript Anda. Ingat, Anda harus membuat file dengan
ekstensi .js.
(function() {
var time = new Date(), //kami mendapat waktu ini dari waktu pc Anda bukan dari
server
second = time.getSeconds() / 60 * 360,
minute = time.getMinutes() / 60 * 360 + time.getSeconds() / 60 *6,
hour = time.getHours() / 12 * 360 + time.getMinutes() /60 * 30,
animation = [
"@keyframes sec-hand{from{transform: rotate(" + second + "deg);}to{transform:
rotate(" + (second + 360) + "deg);}}",
"@keyframes min-hand{from{transform: rotate(" + minute + "deg);}to{transform:
rotate(" + (minute + 360) + "deg);}}",
"@keyframes hr-hand{from{transform: rotate(" + hour + "deg);}to{transform:
rotate(" + (hour + 360) + "deg);}}"
].join("");
document.querySelector("#animasi-jam-analog").innerHTML = animation;
})();
Ketiga, buat file CSS dengan nama style.css dan tempel kode yang diberikan di file
CSS Anda. Ingat, Anda harus membuat file dengan ekstensi .css.
*{
margin: 0;
padding: 0;
}
body{
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: #bdc0df;
background-image: url('./bg.jpg');
background-size: cover;
}
.jam_analog{
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 250px;
height: 250px;
background: #cccfec;
border-radius: 50%;
border: 16px solid #3d3237;
box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.8);
}
.jam_analog:before{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
content: '';
width: 259px;
height: 259px;
border: 6px solid #613e3c;
border-radius: 50%;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
.jam_analog:after {
position: absolute;
content: '';
height: 150px;
width: 150px;
border-radius: 50%;
background: #bdc0df;
z-index: 1;
}
.center-nut,.center-nut2{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
}
.center-nut{
height: 15px;
width: 15px;
background: #262626;
z-index: 2;
}
.center-nut2{
width: 9px;
height: 9px;
background: red;
z-index: 6;
}
.indicator div{
position: absolute;
width: 2px;
height: 5px;
background: #404040;
}
.indicator div:nth-child(1) {
transform: rotate(30deg) translateY(-113px);
}
}
background: red;
}
}
}
background: red;
}
}
}
background: red;
}
}
}
background: red;
}
.sec-hand{
position: absolute;
height: 1px;
width: 1px;
z-index: 5;
animation: sec-hand 60s linear infinite;
}
.sec-hand:before{
position: absolute;
content: '';
height: 130px;
width: 3px;
left: -1px;
top: -25px;
background: red;
border-radius: 3px;
}
.sec-hand:after{
position: absolute;
content: '';
height: 45px;
width: 7px;
left: -3px;
top: -55px;
background: red;
border-radius: 3px;
}
.min-hand{
position: absolute;
height: 1px;
width: 1px;
z-index: 4;
animation: min-hand 3600s linear infinite;
}
.min-hand:before{
position: absolute;
content: '';
border-left: 3px solid transparent;
border-right: 3px solid transparent;
border-bottom: 70px solid #17161d;
left: -3px;
top: -95px;
width: 1px;
height: 1px;
}
.min-hand:after{
position: absolute;
content: '';
border-top: 25px solid #17161d;
left: -3px;
top: -25px;
width: 3px;
height: 1px;
}
.hr-hand{
position: absolute;
height: 1px;
width: 1px;
z-index: 3;
animation: hr-hand 43200s linear infinite;
}
.hr-hand:before{
position: absolute;
content: '';
border-bottom: 55px solid #17161d;
left: -3px;
top: -75px;
width: 1px;
height: 1px;
}
.hr-hand:after{
position: absolute;
content: '';
border-top: 20px solid #17161d;
left: -3px;
top: -20px;
width: 3px;
height: 1px;
}
Itu saja, sekarang Anda telah berhasil Membangun Jam Analog yang Bekerja
menggunakan HTML CSS & Javascript. Jika kode Anda tidak berfungsi atau Anda
menghadapi kesalahan/masalah, silakan beri komentar atau hubungi kami dari halaman
kontak.
TAGS : Jam Analog, Jam, Jam dengan JavaScript, Jam Analog JavaScript, Jam
JavaScript

Membuat Jam Analog Menggunakan HTML CSS & Javascript

Diunggah oleh

Informasi Dokumen

Deskripsi Asli:

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Membuat Jam Analog Menggunakan HTML CSS & Javascript

Diunggah oleh

Hak Cipta:

Format Tersedia

Membuat Jam Analog menggunakan HTML CSS dan Javascript

Video Tutorial Jam Analog yang Berjalan di Javascript

Jam Analog menggunakan Javascript [Kode Sumber]

Anda mungkin juga menyukai