Membuat Jam Digital Menggunakan Javascript

Admin
November 02, 2021
Membuat Jam Digital Menggunakan Javascript

Description Aplikasi

Code Candil Kuya - Halo Pengunjung Code Candil Kuya, Hari ini di Blog ini, Saya akan membuat jam digital javascript menggunakan HTML, CSS, dan Javascript. Di blog ini, saya telah membagikan proyek tentang Contoh animasi CSS, Javascript, Webdesign, dll. Pastikan untuk memeriksanya jika Anda mau.

Sekarang dalam artikel ini, kita akan membuat jam digital dalam format 24 jam dan akan ditampilkan dengan cara HH:MM:SS. Mari kita mulai dengan bagian HTML dari proyek. Pertama, kita akan mengambil tag ap dengan id 'jam'. Saya akan menggunakan tag p untuk memasukkan waktu menggunakan kode javascript khusus.

Mari kita mulai dengan bagian CSS dari proyek. Teks diberi ukuran font dan warna gradien. Keluarga fontnya dipilih sebagai Montserrat. Untuk membuat teks lebih tebal, saya memberikan font-weight 500. Saya menggunakan warna hitam sebagai latar belakang snippet. Anda dapat menggunakan warna apa pun pilihan Anda. Saya telah menghilangkan lebar dan tinggi default proyek dengan menetapkan margin dan padding ke nol. Untuk membuat 'jam' sejajar sempurna di tengah, saya menggunakan properti grid display. Setelah itu, saya telah mengatur 'place-items: center' dan ketinggian ke 100vh. Dengan cara ini, jam akan secara otomatis sejajar dengan pusat viewport.

Di bagian javascript, pertama, kita telah mengambil fungsi customClock(). Dalam proyek ini, Saya mencoba untuk mencapai jam, menit, dan detik saat ini yang disimpan dalam variabel yang berbeda. Digit jam akan ditampilkan dalam satu digit jika jumlahnya kurang dari 10. Untuk instan, jika menit nomor 6, itu akan ditampilkan sebagai 6 bukan 06. Setelah fungsi 'customClock' siap, Saya akan menampilkan waktu di dalam tag p yang kita buat sebelumnya. Kita dapat melakukannya dengan mendapatkan id 'jam' menggunakan metode document.getElementById dan memberikan waktu kita sebagai konten div menggunakan properti innerHTML.

Jam Digital Javascript [ Source Code ]:

Tutorial Membuat Jam Digital Javascript

Untuk membuat Jam Digital Javascript ini, buat dua file. Salah satunya adalah HTML dan, yang lainnya adalah CSS. Anda dapat membuat file js terpisah untuk meletakkan kode js. Untuk proyek ini, saya telah memasukkan kode js sebelum tag HTML penutup. Pada akhirnya, Silakan salin kode di bawah ini dan tempelkan ke file Anda. 

<!DOCTYPE html>
<html lang="en">
<!--code.candilkuya.com-->
<head>
	<meta charset="UTF-8">
	<title>Simple Digital Clock using Javascript</title>
	<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap" rel="stylesheet">
	<link href="style.css" rel="stylesheet">
</head>
<body>
	<p id="clock"></p>
	<script>
	   setInterval(customClock, 500);
	   function customClock() {
	       var time = new Date();
	       var hrs = time.getHours();
	       var min = time.getMinutes();
	       var sec = time.getSeconds();
	       
	       document.getElementById('clock').innerHTML = hrs + ":" + min + ":" + sec;
	       
	   }
	   
	</script>
</body>
</html>

* {
	margin: 0;
	padding: 0;
	font-family: 'Montserrat', sans-serif;
}
body {
	background: #000;
	display: grid;
	place-items: center;
	height: 100vh;
}
#clock {
	font-size: 250px;
	background: -webkit-linear-gradient(#2b32b2, #1488cc);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font-weight: 500;
}
Demo

Penutup

Note : Cukup Sekian Tutorial Cara Membuat Jam Digital Menggunakan Javascript Semoga Informasi Yang dibagikan bisa bermanfaat, jangan lupa di share kepada teman yang membutuhkan, Terima Kasih Sudah Berkunjung.

Incoming search terms :

  • source code website
  • source code aplikasi
  • download source code aplikasi
  • perancangan aplikasi
  • source code sistem informasi berbasis web
  • contoh source code aplikasi
Baca juga :
Admin