Membuat Alert dengan Waktu pada Javascript

Sekarang ini banyak sekalia media pembelajaran yang dapat dengan mudah kita temukan di internet. Untuk mencari materi pelajaran maupun contoh soal bukan hal yang sulit. Kalian bisa menyimpan waktu kalian hanya dirumah saja berselanjar mencari bahan pelajaran. Lebih menghemat waktu dan tenaga. Karena materi yang kita cari bersumber ke seluruh dunia. Salah satu alternatif mencari sumber bahan materi tentunya melalui situs edukasi. Website edukasi biasanya berisi materi dan contoh soal. Bahkan adapula quiz yang bisa kalian coba untuk mengetahui seberapa jauh pemahaman kita.

Bicara mengenai kuis, kalian pasti pernah melihat ada website edukasi memberikan fitur quiz. Biasanya akan ada contoh soal pilihan dengan diberikan waktu pengerjaanya. Jika waktu habis maka akan muncul alert dan dianggap selesai. Sesuai dengan hal yang akan kita bahas kali ini, kita akan mencoba membuat alert dengan waktu pada Javascript. Dengan javascript yang memang spesialis membuat tampilan menjadi interaktif, kita akan membuat timer alert dengan javascript.

Langsung saja kalian bisa mencoba ikuti contoh code dibawah ini.

alert.html

<html>
<head>
	<meta charset="UTF-8">
	<title>Document</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
	<script>
		function startTimer(waktu, display) {
	    var timer = duration, minutes, seconds;
	    setInterval(function () {
	        minutes = parseInt(timer / 60, 10)
	        seconds = parseInt(timer % 60, 10);

	        minutes = minutes < 10 ? "0" + minutes : minutes;
	        seconds = seconds < 10 ? "0" + seconds : seconds;

	        display.text(minutes + ":" + seconds);

	        if (--timer < 0) {
	        	alert("Waktu telah habis!");
	            timer = duration;
	           
	        }
	    }, 1000);
	}

	jQuery(function ($) {
	    var waktu = 60 * 1,
	        display = $('#time');
	    startTimer(waktu, display);
	});
	</script>
</head>
<body>
    <div>Batas pengerjaan soal dalam waktu <span id="time">01:00</span> Menit!</div>
</body>
</html>

<html>

<head>

<title>Document</title>

function startTimer(waktu, display) {

var timer = duration, minutes, seconds;

setInterval(function () {

minutes = parseInt(timer / 60, 10)

seconds = parseInt(timer % 60, 10);

minutes = minutes < 10 ? "0" + minutes : minutes;

seconds = seconds < 10 ? "0" + seconds : seconds;

display.text(minutes + ":" + seconds);

if (--timer < 0) {

alert("Waktu telah habis!");

timer = duration;

}

}, 1000);

}

jQuery(function ($) {

var waktu = 60 * 1,

display = $('#time');

startTimer(waktu, display);

});

</script>

</head>

<body>

<div>Batas pengerjaan soal dalam waktu <span id="time">01:00</span> Menit!</div>

</body>

</html>

jika sudah kalian bisa save, dan lihat hasilnya pada browser kalian. Hasilnya akan muncul seperti dibawah ini.

saat waktu habis muncul alert seperti ini.

Konsepnya adalah pada saat kalian buka halaman tampilan website tersebut, maka secara otomatis penghitungan waktu mundur akan dimulai. Sehingga pengguna akan mengerjakan soal sesuai batas waktu yang sudah ditentukan. JIka batas waktu habis, maka akan muncul alert sebagai tanda soal quiz telah selesai. Seperti itu kira-kira konsep dasarnya. Tentunya kalian bisa kembangkan lagi dengan perhitungan soal benar atau salah dan point diakhir pengerjaan soalnya.

Mudah bukan ?

Sekian pembahasan mengenai cara membuat alert dengan waktu pada Javascript. Semoga bermanfaat.

alert.html

Facebook DUMET School

Categories