membuat jam analog dan digital dengan javascript

share

membuat jam analog dan digital dengan javascript membuat jam analog dan digital dengan javascript membuat jam analog dan digital dengan javascript membuat jam analog dan digital dengan javascript membuat jam analog dan digital dengan javascript
  • membuat jam analog dan digital dengan javascript

    Membuat Jam Analog dan Digital dengan Javascript


    Tutorial cara membuat jam analog dan digital dengan javascript serta HTML dan CSS sehingga akan menampilkan interface waktu berjalan yang menarik dan tentu saja interaktif secara realtime zona waktu perangkat.
  • membuat jam analog dan digital dengan javascript
    Service
    1. Complete Website
    2. Only web script
    3. Web modification
    4. Application program
    5. Free web template
    6. Free application
    7. Basic SEO
    8. Article request
    9. Tutorial programing
  • membuat jam analog dan digital dengan javascript
    MOTO
    "Kepuasan Pelanggan adalah Prioritas kami, Sebagai Pemicu Semangat Dalam Memberikan Pelayanan Terbaik".
  • membuat jam analog dan digital dengan javascript Teknologi dan Bahasa
    PHP-5, HTML-5, CSS3, SQL Server, MySQL Database, Access Database, Java, JavaScript, dan Visual Basic.
  • membuat jam analog dan digital dengan javascript
    VISI
    "Menjadi penyedia layanan yang terpercaya dan maju dalam dunia Teknologi Informasi."

Membuat Jam Analog dan Digital dengan Javascript

Cara membuat jam analog dan digital dengan javascript serta HTML dan CSS sehingga akan menampilkan interface waktu berjalan yang menarik dan tentu saja interaktif secara realtime. Cara membuat jam digital dapat dikatakan sangat mudah, begitu juga membuat jam analog dengan javascript karena syntax dan fungsi-fungsi dasar sudah tersedia seperti getHours, getMinutes, dan getSeconds. Kenapa harus membuat jam analog dan digital dengan javascript, bukan PHP atau lainnya? perlu kita ketahui bersama bahwa javascript dapat digunakan untuk membuat halaman website menjadi lebih interaktif. Tapi saat ini kita tidak perlu membandingkan antara membuat jam analog dan digital dengan php ataupun javascript, yang penting adalah bisa dulu membuatnya.

Tutorial cara membuat jam analog dan digital dengan javascript sehingga menampilkan waktu berjalan pada halaman web juga di desain dengan kode HTML dan CSS. Sehingga kita perlu membuat file HTML untuk menyimpan kode javascript di dalamnya, sedangkan kode CSS untuk mempercantik interfacenya. Tutorial terkait dengan jam analog dan digital ini juga tersedia pada artikel cara menampilkan jam berjalan di php.

Siap-siap saja berikut adalah tutorial cara membuat jam analog dan digital dengan javascript secara realtime sehingga akan tampil waktu berjalan pada halaman web.

Membuat Jam Analog dan Digital dengan Javascript


jam analog javascript

membuat jam analog dan digital dengan javascript

1. Membuat Jam Analog dengan Javascript.

Jika kita melihat web atau blog dengan tampilan waktu berjalan pada sisi sidebar, itu adalah widget jam yang dibuat menggunakan javascript atau php. Sekarang kita akan membuat widget jam itu sendiri yaitu pada tutorial membuat jam analog dengan javascript berikut ini.

Untuk membuat jam analog dengan javascript silahkan ikuti kode HTML di bawah ini, simpan dengan ektensi file html.

<html>
<head>
	<title>Tutorial Membuat Jam Analog dan Digital dengan 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,h3,h4,p,a{
		font-family: sans-serif;
		font-weight: normal;
	} 
	.jam_analog {
		background: #e7f2f7;
		position: relative;
		width: 160px;
		height: 160px;
		border: 12px solid #f28000;
		border-radius: 50%;
		padding: 14px;
		margin: 14px 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: 20px;
		height: 20px;
		background: #232323;
		border: 4px solid #f28000;
		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>
	<h3>Tutorial Membuat Jam Analog dan Digital dengan Javascript</h3>
	<h4>Jam Analog dengan Javascript</h4>
</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>
<center><p>RAJA PUTRA MEDIA</p></center>
 
<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>

Jika kode html di atas dijalankan pada web browser maka akan menampilkan jam analog realtime berjalan sesuai dengan zona waktu pada perangkat, seperti gambar di bawah ini.

membuat jam analog dan digital dengan javascript


2. Membuat Jam Digital dengan Javascript.

Selanjutnya adalah cara membuat jam digital dengan javascript yang akan menampilkan waktu berjalan secara realtime digital, simpan kode di bawah ini dengan ekstensi html atau php.

<html>
<head>
	<title>Tutorial Membuat Jam Analog dan Digital dengan Javascript</title>
</head>
<body>
	<style>
	h1,h2,h3,h4,p,a{
		font-family: sans-serif;
		font-weight: normal;
	}
	.jam-digital {
		overflow: hidden;
		width: 330px;
		margin: 20px auto;
		border: 5px solid #f28000;
	}
	.kotak{
		float: left;
		width: 110px;
		height: 100px;
		background-color: #c1c1c1;
	}
	.jam-digital p {
		color: #fff;
		font-size: 36px;
		text-align: center;
		margin-top: 30px;
	}
</style>
 
<center>
	<h3>Tutorial Membuat Jam Analog dan Digital dengan Javascript</h3>
	<h4>Jam Digital dengan Javascript</h4>
</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>
 
<center><p>RAJA PUTRA MEDIA</p></center>
 
<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>

Penjelasan membuat jam digital menggunakan javascript untuk menampilkan jam aktif realtime pada kode di atas adalah sebagai berikut.

  • getHours() metode ini berfungsi untuk mengambil objek jam antara (00-23), ditampilkan pada tag div id jam.
  • getMinutes() berfungsi untuk mengambil objek menit 60 (0-59), ditampilkan pada tag div id menit.
  • getSeconds() metode yang berfungsi untuk mengambil objek second atau detik (0-59), ditampilkan pada tag div id detik.

Jika kode html membuat jam digital dengan javascript di atas dijalankan pada web browser maka akan menampilkan jam berjalan realtime seperti gambar di bawah ini.

membuat jam analog dan digital dengan javascript

Sekian penjelasan tutorial cara membuat jam analog dan digital dengan javascript yang memungkinkan kita untuk membuat widget jam digital sendiri pada halaman web atau blog. Untuk membuat jam analog dengan javascript maupun membuat jam digital dengan javascript, silahkan langsung kopi saja source code pada jendela kode di atas, simpan lalu jalankan.

Cara Membuat Jam Analog dan Digital dengan Javascript

Sekian penjelasan tentang cara membuat jam analog dan digital dengan javascript secara realtime menggunakan dengan metode atau fungsi dasar getHours, getMinutes, dan getSeconds. Untuk mendapatkan source code atau script membuat jam digital atau jam analog, silahkan Anda dapat langsung copas melalui coding yang tampil di atas, jika script error mohon hubungi kami melalui SMS atau email atau melalui form komentar dan obrolan. Semoga dapat membantu.

Baca juga :


Membuat Jam Analog dan Digital dengan Javascript

Tags: cara membuat jam analog javascript, cara membuat jam digital javascript, jam analog javascript, jam digital javascript, membuat jam analog dan digital dengan javascript


Reliable

membuat jam analog dan digital dengan javascript

Advertise

Archive

Payment & Donation

membuat jam analog dan digital dengan javascript

Rekening BCA : 343 1156 006

a/n : Andi Hatmoko

Rekening MANDIRI : 13300 11921 079

a/n : Andi Hatmoko

membuat jam analog dan digital dengan javascript

Account :

andihatmoko@gmail.com

Live Chat

bobby wiratm2023-02-07, 15:15 pm
permisi min boleh minta source code Program Aplikasi Koperasi Simpan Pinjam
Mr. Roy2023-02-07, 09:11 am
minta link download Aplikasi Manajemen Karyawan Berbasis Web
zul2023-02-07, 08:30 am
Assalamualaikum, wr wb izin minta link download Aplikasi SPPS nya ka, jika berbayar boleh minta prosedurnya, terima kasi
Delwon2023-02-06, 11:32 am
Selamat siang admin, untuk aplikasi arsip surat berbasis webnya berapa harganya?
dek2023-02-06, 08:41 am
tanya pembuatan aplikasi entri nilai
amin2023-02-04, 12:22 pm
tanya harga aplikasi sarana dan prasarana sekolah
tukangketik2023-01-31, 15:04 pm
bikin sistem informasi surat masuk dan keluar berapa
Dimas2023-01-30, 21:08 pm
apakah aplikasi cat bisa menentukan point dari jawaban contohnya di soal tkp kan setiap poin jawaban ada nilainya
josh hutapea2023-01-26, 13:10 pm
mau pesan aplikasi gimana caranya
tania2023-01-20, 09:53 am
kalo mau mesen aplikasi berbasis web bisa ga ka
Jenny Sokoy 2023-01-11, 13:18 pm
cara membuat aplikasi absensi siswa
alvinno2022-12-27, 01:52 am
berpa aplikasi Program Aplikasi Pembayaran SPP Sekolah
Ronny2022-12-21, 17:34 pm
Jika saya butuh aplikasi CAT custom berapa ya?
reo2022-12-21, 09:46 am
berapa harga untuk apk rental mobil
anto2022-12-19, 11:48 am
aplikasi pos nya tidak bisa di download ya_ ? apa sekarang berbayar_ buat referensi tugas akhir
NDARU SUBEKT2022-12-19, 11:02 am
untuk simpeg 7_ 2 brp bos
Herawan2022-12-17, 06:24 am
Itu versi demo, utk versi non demo, ada pembayaran berapa?
afio2022-12-12, 15:55 pm
kak gimana cara download aplikasinya?
peres2022-12-09, 08:22 am
admin berapa harga aplikasi sipasnya_ ?
thomas2022-11-29, 08:07 am
brp aplikasi HRD
Repades Patr2022-11-26, 14:51 pm
aplikasi bisnis rental barang berapa ?
Ifan2022-11-19, 23:28 pm
Aplikasi pendataan pegawai harga berapa?
yunislisa2022-11-09, 10:42 am
Bisa nggak saya request aplikasi penyadap SMS? Dan biayanya berapa?
AZ2022-11-07, 16:06 pm
Halo utk aplikasi surat masuk keluar biaya nya berapa ya?
nursia2022-11-02, 15:42 pm
apakah aplikasi itu bisa di kostum sesuai kebutuhan, terimakasih, mohon info via email yaa
Nursia2022-11-02, 15:40 pm
apakah ada aplikasi tentang data pengembangan kompetensi _ diklat PNS? jika ada boleh infokan kepada saya
yosp2022-11-02, 05:35 am
saya ingin aplikasi bembayaran spp web
Irfan shobar2022-11-01, 20:20 pm
Ingin membuat KTP online
Riska koromo2022-10-20, 09:14 am
Ass Ka tutorial membuat aplikasi absen PKL berbasis web
Nst2022-10-15, 02:50 am
Bagaimana mengkoneksikannya dengan pelanggan?
Dennis2022-10-14, 22:40 pm
Saya tertarik dengan Program Rental Web Based, bagaimana untuk proses pembelianya?
Wan2022-10-07, 14:12 pm
Berapa harga aplikasi sisfo pasar
RANGGA2022-10-06, 14:10 pm
bang mau beli aplikasi pembuat KTP softcopy itu bang
Prathama2022-09-19, 15:48 pm
Aplikasi Koperasi Usaha Bisa
Andre2022-09-16, 23:31 pm
untuk aplikasi pengajuan judul skripsi berapa min
Basilio2022-09-15, 07:37 am
Pagi Bang ada aplikasi semua data siswa?
Bagus Andrem2022-09-11, 14:00 pm
Kl pembuatn aplikasi pos berbasi android berpa gan?
herry2022-09-01, 13:18 pm
saya di distribusi oksigen dgn sistem rental tabungnya_ saya butuh apk utk moinitoring tabung
Asri2022-08-27, 09:04 am
Brapa price tuk aplikasi manajemen database organisasi dan anggota 1 provinsi saja_ _
HERLI2022-08-25, 02:14 am
Untuk Harga SIPAS Brapa Bg ?
Usman Musa2022-08-24, 00:06 am
Mau tanya jika berapa biaya pembuatan Aplikasi Data Keanggotaan sebuah Organisasi atau Perguruan Silat
Bayu2022-08-20, 06:28 am
info harga aplikasi hrd berbasis web
Ferdyn Rede2022-08-07, 09:56 am
Bagaimana cara download link e_ ktp nya🙏🏻
Yuko Hermawa2022-08-05, 08:12 am
Boleh info harganya ? Ada fitur utk akses cloud gak ? Klo custom apakah bisa ?
efrin2022-07-15, 22:44 pm
Program Aplikasi Arsip Digital Berbasis Web mohon bertanya berapa harganya makasih
Toyo2022-07-13, 08:23 am
Brp harga Apk Inventory barang gudang

Post your chat:


Name



Email



Chat



Confirm you are NOT a spammer

 
membuat jam analog dan digital dengan javascript