Cara menggunakan javascript countdown timer loop

Dalam kesempatan kali ini saya akan berbagi sedikit tips membuat countdown sederhana yang bisa digunakan dalam aplikasi seperti ujian online. Dimana dalam ujian online tersebut biasanya diberikan batas waktu dalam mengerjakan ujian dan bila user melakukan refresh halaman web maka waktu juga harus tetap berjalan tidak mengulang dari awal. Untuk itu disini saya akan menggunakan bantuan jquery Download disini, jquery.countdown.js Download disini dan menggunakan $_SESSION php untuk terus memastikan waktu terus berjalan meskipun halaman direfresh ulang. Oke karena kodenya cukup sederhana maka langsung saja saya tampilkan kode programnya dibawah ini

<?php
session_start();
if(isset($_SESSION["mulai_waktu"])){
 $telah_berlalu = time() - $_SESSION["mulai_waktu"];
 }
else {
 $_SESSION["mulai_waktu"] = time();
 $telah_berlalu = 0;
 }
?>
<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="js/jquery.countdown.js"></script>
<div id="tempat_timer">
<span id="timer">00 : 00 : 00</span>
</div>
<script type="text/javascript">
function waktuHabis(){
 alert("selesai dikerjakan ......");
 }
function hampirHabis(periods){
 if($.countdown.periodsToSeconds(periods) == 60){
 $(this).css({color:"red"});
 }
 }
$(function(){
 var waktu = 180; // 3 menit
 var sisa_waktu = waktu - <?php echo $telah_berlalu ?>;
 var longWayOff = sisa_waktu;
 $("#timer").countdown({
 until: longWayOff,
 compact:true,
 onExpiry:waktuHabis,
 onTick: hampirHabis
 });
 })
</script>
<style>
#tempat_timer{
 margin:0 auto;
 text-align:center;
 }
#timer{
 border-radius:7px;
 border:2px solid gray;
 padding:7px;
 font-size:2em;
 font-weight:bolder;
 }
</style>

Keterangan singkat

session_start();
if(isset($_SESSION["mulai_waktu"])){
$telah_berlalu = time() - $_SESSION["mulai_waktu"];
}
else {
$_SESSION["mulai_waktu"] = time();
$telah_berlalu = 0;
}

kode diatas akan mencatat waktu pertama kali user membuka halaman tersebut dan menyimpannya dalam variabel $_SESSION[“waktu_mulai”] dan menghitung waktu yang telah digunakan sehingga dapat dihitung pula waktu yang tersisa.

$(function(){
 var waktu = 180; // 3 menit
 var sisa_waktu = waktu - <?php echo $telah_berlalu ?>;
 var longWayOff = sisa_waktu;
 $("#timer").countdown({
 until: longWayOff,
 compact:true,
 onExpiry:waktuHabis,
 onTick: hampirHabis
 });
 })

Kode diatas adalah kode utama dari countdown timer ini dan dijalankan ketika halaman telah diload dengan sempurna untuk konfigurasi setting jquery.countdown.js anda dapat membacanya secara langsung disitus resminya di http://keith-wood.name/countdown.html

Learn how to create a countdown timer with JavaScript.

Try it Yourself »

Creating a Countdown Timer

Example

Try it Yourself »

Tip: Learn more about the window.setInterval() method in our JavaScript Reference.

SetInterval dalam javascript adalah timing event yang berarti sesuatu event atau fungsi yang dijalankan berdasarkan waktu yang telah ditentukan. Dimana setinterval ini akan dijalankan terus menerus atau looping sampai di hentikan dengan clearinterval. Hampir sama dengan fungsi settimeout, hanya saja settimeout ini tidak melakukan looping karena fungsi yang akan dijalankan hanya satu kali dengan durasi yang sudah ditentukan.Nah untuk kasus ini saya akan menggunakan setinterval untuk Cara Membuat Timer Menggunakan Javascript.

Cara Membuat Timer Menggunakan Javascript langkah yang harus kita lakukan terlebih dahulu adalah membuat struktur htmlnya seperti pada script di bawah ini.

<!DOCTYPE HTML>

<html>

<head>

.kotak{background: black;padding:10px;width: 300px; text-align: center}

h1{color:white;}

#demo{color:red; border:1px solid red;border-radius: 10px; display: inline; padding: 5px;}

</style>

<title>Cara Membuat Timer Menggunakan Javascript</title>

</head>

<body>

<h1>TIMER</h1>

</div>

</body>

</html>

Jika sudah maka kita akan membuat sebuah variable untuk setting tanggal yang akan kita hitung dengan perbandingan waktu sekarang. seperti script di bawah ini, dan penulisannya saya masih buat default agar lebih mudah membuat timernya ya, karena disini saya tidak membuat function tanggal dengan format indonesia.

var SetDate = new Date("Oct 8, 2018 20:05:30").getTime();

Dan langkah selanjtnya saya membuat sebuah function setinterval untuk menjalankan dan menghitung waktunya seperti pada script di bawah ini.