Cara Membuat Countdown Timer Dengan JavaScript

Daftar Isi Konten

Cara Membuat Countdown Timer Dengan JavaScriptÂ atau Cara membuat countdown timer link download hitungan mundur. Cara Membuat Countdown Timer Dengan redirect link kehalaman tertentu. Halo sobat blogger kali ini jagoankode akan membahas mengenai 3 judul sekaligus dengan topik membuat javascript coundown timer. Sebenarnya apasih tujuan orang membuat count down timer ? mari kita bahas

Fungsi Countdown Timer

Sebenarnya Fungsi dari countdown timer sendiri sangat banyak sekali, sesuai dengan kata countdown yang berarti hitungan mundur adalah memberikan jeda waktu sampai batas waktu yang ditentukan berakhir. dan kemudian dilanjutkan dengan fungsi utamanya bisa mengalihkan link atau memunculkan link, atau membuat sebuah jam, atau bisa juga menjadi stopwatch atau fungsi lain seperti hitungan waktu.

Cara Membuat Countdown Timer Dengan JavaScript

mungkin anda pernah melihat sebuah link downlad yang sebelumnya ada muncul detik hitungan mundur yang pada saat habis maka muncul tombol buton link yang menuju kearah link yang sebenarnya. atau mungkin anda juga pernah melihat waktu jam atau detik didalam sebuah blog atau pun stopwatch timer pada sebuah blog.

Sebenarnya pembuatan Countdown timer bisa dilakukan dengan berbagai macam bahasa yan mendukung seperti HTML, PHP, Phyton Maupun Javascript. pada kesempatan kali ini admin akan membahas tentang pembuatannya melalui jaavascript. Kenapa ?? karna bisa diterapkan dimana saja, serta pembuatan dan pengujian nya juga tidak terlalu sulit. selain itu juga bisa support di platform manapun dan bisa diletakan di web maupun di blog anda.. Lalu sebenarnya bagaimanakah pembuatannya apakah sangat sulit sekali ? Jawabannya Tidak malah dalam membuat countdown timer dengan javascript sangatlah mudah sekali.

Penasaran dengan bagaimana cara pembuatannya ?? mari simak langkahnya berikut ini :

#1. Cara Membuat Countdown Timer Dengan JavaScript (Hari,Jam,Menit, Detik )

<!-- countdown timer jagoankode.blogspot.com  -->
<p id="carasingkat"></p>
<script>
// Silahkan anda atur tanggal anda
var countDownDate = new Date("Sep 5, 2018 15:37:25").getTime();
// Hitungan Mundur Waktu Dilakukan Setiap Satu Detik
var x = setInterval(function() {
  // Mendapatkan Tanggal dan waktu Pada Hari ini
  var now = new Date().getTime();
  //Jarak Waktu Antara Hitungan Mundur
  var distance = countDownDate - now;
  // Perhitungan waktu hari, jam, menit dan detik
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);
  // Tampilkan hasilnya di elemen id = "carasingkat"
  document.getElementById("carasingkat").innerHTML = days + "d " + hours + "h "
  + minutes + "m " + seconds + "s ";
  // Jika hitungan mundur selesai,
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("Carasingkat").innerHTML = "EXPIRED";
  }
}, 1000);
</script>

DEMO

#2. Cara Membuat Countdown Timer Dengan JavaScript (Redirect/Pengalihan Link )

<html>
    <head>
        <title>cara singkat</title>
    </head>
    <body>
        <div id="carasingkat">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script>
            var url = "http://jagoankode.blogspot.co.id/search/label/Article"; // url tujuan
            var count = 10; // dalam detik
            function countDown() {
                if (count > 0) {
                    count--;
                    var waktu = count + 1;
                    $('#carasingkat').html('<b>Halaman Ini Akan Otomatis Di Redirect KE </b> ' + url + ' dalam ' + waktu + ' detik.');
                    setTimeout("countDown()", 1000);
                } else {
                    window.location.href = url;
                }
            }
            countDown();
        </script>
    </body>
</html>

DEMO

#3. Cara Membuat Countdown Timer Dengan JavaScript (Waktu yang tersisa/Waktu tunggu )

HTML

<html>
<body>
<div>Time left = <span id="timer"></span></div>
</body>
</html>

CSS

body{
  background-color:#2D3047;
}
div{
  background-color:#419D78;
  color:#EFD0CA;
  font-size:20px;
  text-align:center;
}

JAVASCRIPT

document.getElementById('timer').innerHTML =
  03 + ":" + 00;
startTimer();
function startTimer() {
  var presentTime = document.getElementById('timer').innerHTML;
  var timeArray = presentTime.split(/[:]+/);
  var m = timeArray[0];
  var s = checkSecond((timeArray[1] - 1));
  if(s==59){m=m-1}
  //if(m<0){alert('timer completed')}
  document.getElementById('timer').innerHTML =
    m + ":" + s;
  setTimeout(startTimer, 1000);
}
function checkSecond(sec) {
  if (sec < 10 && sec >= 0) {sec = "0" + sec}; // add zero in front of numbers < 10
  if (sec < 0) {sec = "59"};
  return sec;
}

DEMO

Demikianlah tutorial kali ini mengenai Cara Membuat Countdown Timer Dengan JavaScript Semoga informasi ini apat membantu anda 🙂