› ›

Cara Membuat Countdown Timer Dengan JavaScript

Sabtu, 02 Februari 2019 Add Comment Edit
Judul : Cara Membuat Countdown Timer Dengan JavaScript
Link : Cara Membuat Countdown Timer Dengan JavaScript


Pada postingan ini saya ingin membahas Cara Membuat Countdown Timer Dengan JavaScript, saya berusaha membuat artikel ini dengan sebaik mungkin, apabila masih kurang baik mohon dimaklumi...hehehe. Mudah-mudahan dengan membaca artikel ini dapat memberikan tambahan informasi bagi sobat

Baca juga


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 :

Kode ini bisa anda terapkan dimana saja dipostingan blogger atau dihalaman page web atau blog

#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>


#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>

#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;
}

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


Demikianlah informasi yang dapat saya sampaikan mengenai Cara Membuat Countdown Timer Dengan JavaScript. Semoga dapat bermanfaat bagi teman teman semua saya pamit. Silahkan baca artikel menarik lainnya . Sekian dan terima kasih.

Anda sekarang membaca artikel Cara Membuat Countdown Timer Dengan JavaScript dengan alamat link https://initipsngeblog.blogspot.com/2019/02/cara-membuat-countdown-timer-dengan.html

0 Response to "Cara Membuat Countdown Timer Dengan JavaScript"

Posting Komentar

Langganan: Posting Komentar (Atom)

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel