Cara Membuat Flip Clock Menggunakan FlipClock.js

Pada kesempatan kali ini kita akan belajar bagaimana Cara Membuat Flip Clock Menggunakan FlipClock.js . Dalam kasus ini kita akan membuat tampilan waktu atau jam. Dimana desain dari jam ini saat pergantian detik,menit,maupun jam secara flip atau seperti membalikkan setiap angka. Baiklah tidak perlu berlama-lama lagi yuk kita coba membuatnya,ikuti langkah-langkah berikut ini:

Langkah pertama

Persiapan buka text editor yang akan dipakai lalu buat file yang didalamnya berisikan code seperti dibawah ini:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Membuat Desain Flip Clock Menggunakan jQuery</title>
	<link rel="stylesheet" href="flipclock.css">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body class="bg-secondary">
	<div class="container mt-5">
		<div class="row">
			<div class="col-md-6 offset-md-3">
				<h1 class="text-uppercase text-center my-4 text-light">Flip Clock Now</h1>
				<div class="clock"></div>
			</div>
		</div>
	</div>
	

	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
	<script src="flipclock.js"></script>
</body>
</html>

Pada code diatas terdapat file dari Flipclock dengan extention .css dan .js .Oiya sebagai tambahan saya juga menambahkan link dari CSS Bootstrap dan juga link jQuery.

Langkah kedua

Sekarang tambahkan script seperti dibawah ini agar fungsi Flipclock bisa bekerja atau tampilan efek flip berjalan.

<script type="text/javascript">
	var clock = $('.clock').FlipClock({
		clockFace: 'TwelveHourClock'
	});
	</script>

Apabila sudah ditambhakan script diatas ,coba jalankan pada browser masing-masing jika benar akan seperti tampilan dibawah ini:

Saya kira cukup dalam pembahasan kali ini tentang Cara Membuat Flip Clock Menggunakan FlipClock.js .Semoga bermanfaat dan sampai jumpa dengan pembahasan lainnya.

terima kasih

Cara Membuat Flip Clock Menggunakan FlipClock.js

Kategori