Timer dengan JavaScript

timerTerkadang, kita perlu untuk membuat timer pada aplikasi web yang kita bangun. Di sini saya mencoba mengurai sebuah tutorial untuk membuat timer. Untuk membuat timer ini kita menggunakan bahasa JavaScript. Cara pertama kita menggunakan hanya javascript sedangkan cara kedua kita menggunakan bantuan pustaka jquery. Oiya, sumber tutorialnya berasal dari Smart Tutorial.

Cara Pertama: Murni Javascript

<!DOCTYPE html>
<html>
<head>
    <title>Counter tanpa jquery</title>
</head>
<body>
<h2>Timer:  <span id="timer"></span></h2>
<script type="text/javascript">
    var countDownTime = 60*60;
    function countDownTimer() {
        var hours = parseInt( countDownTime / 3600 ) % 24;
        var minutes = parseInt( countDownTime / 60 ) % 60;
        var seconds = countDownTime % 60;
        var result = (hours < 10 ? "0" + hours : hours) + ":" + (minutes < 10 ? "0" + minutes : minutes) + ":" + (seconds  < 10 ? "0" + seconds : seconds);
        document.getElementById("timer").innerHTML = result;
           if(countDownTime == 0 ){ countDownTime = 60*60*60; }
           countDownTime = countDownTime - 1;
           setTimeout(function(){ countDownTimer() }, 1000);
    }
    countDownTimer();
</script>
</body>
</html>

Adapun yang perlu kita perhatikan adalah:

  • letakkan skrip pada bagian akhir, asumsinya adalah bahwa skrip dijalankan setelah halaman web di-load semua
  • Variabel countDownTime adalah jumlah detik mula-mula

Cara Kedua: Dengan JQuery

<!DOCTYPE html>
<html>
<head>
    <title>Timer dengan jQuery</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            var c = 60*60;
            var t;
               timedCount();
               function timedCount() {
                   var hours = parseInt( c / 3600 ) % 24;
                   var minutes = parseInt( c / 60 ) % 60;
                   var seconds = c % 60;
                   var result = (hours < 10 ? "0" + hours : hours) + ":" + (minutes < 10 ? "0" + minutes : minutes) + ":" + (seconds  < 10 ? "0" + seconds : seconds);
                   $('#timer').html(result);
                   if(c == 0 ){ c = 60*60*60; }
                   c = c - 1;
                   t = setTimeout(function(){ timedCount() }, 1000);
               }
        });
    </script>
</head>
<body>
<h2>Timer:  <span id="timer"></span></h2>                   
</body>
</html>

Pada sintaks di atas, variabel c adalah jumlah detik mula-mula timer dijalankan.

Sumber: http://www.smarttutorials.net/javascript-countdown-timer

Pos ini dipublikasikan di Developer dan tag , . Tandai permalink.

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s