Membuat Link Download dengan Countdown

oleh pada 06 March 2019 0 Komentar
Membuat Link Download dengan Countdown

Mungkin teman-teman kerap menjumpai sebuah halaman download dengan menampilkan waktu tunggu, sebelum link tersebut dapat diklik, terlebih dahulu pengunjung diharuskan menunggu biasanya sekitar 5 atau 10 detik.

Adapun yang teman-teman harus persiapkan adalah, sedikit pengetahuan tentang JavaScript karena untuk membuat hitungan mundur (counter) secara real time, hanya dapat dilakukan dengan JavaScript.

Untuk demonya bisa diklik disini:
https://www.yellowweb.id/demo/download_counter/

dan untuk skrip lengkapnya, akan terlihat seperti berikut dibawah ini:

<!DOCTYPE html>
<html>
<head>
	<title>Countdown Timer Download | Kursus Web YELLOWWEB.ID</title>
	<script type="text/javascript">
		
		var counter = 10;
		function countDown(){
			if(counter >= 0){
				document.getElementById("timer").innerHTML = counter;
			} else {
				download();
				return;
			}
			counter -=1;

			var counter2 = setTimeout("countDown()",1000);
			return;
		}

		function download(){
			document.getElementById("link").innerHTML = "<a href='#'>Download</a>";
		}

	</script>
</head>
<body onload="countDown();">

	<h3>File Download</h3>
	<em>Link download akan muncul dalam <span id="timer"></span> detik</em>

	<br>
	
	=> <span id="link"></span>

</body>
</html>

Sekian untuk artikel yang singkat ini, semoga bermanfaat bagi teman-teman sekalian. Sampai berjumpa kembali diartikel berikutnya.