Cara Membuat Timer Menggunakan Javascript

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>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style type="text/css">
        .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>
    <div class="kotak">
        <h1>TIMER</h1>
        <h1 id="demo"></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.

var x = setInterval(function() {

    // Get todays date and time
    var now = new Date().getTime();
    
    // Find the distance between now and the count down date
    var distance = SetDate - now;
    
    // Time calculations for days, hours, minutes and seconds
    var hari = Math.floor(distance / (1000 * 60 * 60 * 24));
    var jam = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var menit = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    var detik = Math.floor((distance % (1000 * 60)) / 1000);
    
    // Output the result in an element with id="demo"
    if(hari!==0){
        var hasil = hari + " Hari, " + jam + " : "+ menit + " : " + detik ;
    }else if(jam!==0){
        var hasil = jam + " : "+ menit + " : " + detik ;
    }else if(menit!==0){
        var hasil = menit + " : " + detik ;
    }else if (detik!==0){
        var hasil = detik ;
    }
    document.getElementById("demo").innerHTML = hasil;
    
    // If the count down is over, write some text 
    if (distance < 0) {
        clearInterval(x);
        document.getElementById("demo").innerHTML = "EXPIRED";
    }
}, 1000);

Jika teman-teman buka di browser maka tampilannya akan seperti pada gambar di bawah ini.

Demikian artikel tentang Cara Membuat Timer Menggunakan Javascript. Semoga bermanfaat dan selamat mencoba.

Cara Membuat Timer Menggunakan Javascript

Kategori