Skip to content
Om Puter

Om Puter

Berbagi Tutorial Coding dan Pemrograman Komputer

Menu
  • Channel YouTube ThirteeNov
  • Channel YouTube Om Puter
Menu

Script HTML dan JavaScript untuk membuat timer countdown

Posted on 16 Maret 202516 Maret 2025 by OmPuter

Sering kita lihat di internet halaman web berisi countdown, menghitung hari, jam, menit dan detik suatu event akan dimulai. Nah saya pernah membuat countdown seperti itu, berikut ini scriptnya:

<div style="background-color: black; padding: 1em; color: red;">
	<div style="display: table; width: 100%;">
		<div style="display: table-cell; vertical-align: middle;">
			<img src="https://ciihuy.com/wp-content/uploads/2025/03/countdown13.jpg" style="width: 128px;">
		</div>
		<div style="display: table-cell; vertical-align: middle; text-align: right;">
			<div id="countdown" style="font-size: 1.5em;"></div>
		</div>
	</div>
	
</div>
<script>
	function updateCountdown() {
						const targetDate = new Date("May 13, 2025 13:25:00").getTime();
						const now = new Date().getTime();
						const timeLeft = targetDate - now;

						if (timeLeft <= 0) {
							document.getElementById("countdown").innerHTML = "Ciiiiiiiiiiiiiiiiiiiiiihuy!";
							return;
						}

						const days = Math.floor(timeLeft / (1000 * 60 * 60 * 24));
						const hours = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
						const minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
						const seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);

						document.getElementById("countdown").innerHTML = 
							`${days} hari ${hours} jam ${minutes} menit ${seconds} detik`;
					}

					updateCountdown();
					setInterval(updateCountdown, 1000);
</script>

Kamu tinggal mengubah tanggalan yang kamu inginkan, edit bagian ini: May 13, 2025 13:25:00

Post Views: 203

Kategori

  • 3D Max
  • Adobe Animate
  • Android
  • c#
  • Cordova
  • HTML5, CSS & JavaScript
  • iOS
  • Lain-lain
  • Photoshop
  • PHP
  • Python
  • Roblox
  • Tak Berkategori
  • Unity
  • WordPress
ciihuy2020
© 2026 Om Puter | Powered by Superbs Personal Blog theme