Cara menggunakan javascript one minute timer

Learn how to create a countdown timer with JavaScript.

Table of Contents Show

Creating a Countdown Timer
Share this:
Menyukai ini:
Apa Itu Countdown Timer dan Apa Saja Manfaatnya?
Membuat Countdown Timer dengan JavaScript
Membuat Countdown Timer dengan Plugins
Countdown Timer Ultimate
Countdown Builder
WordPress Countdown Widget

Try it Yourself »

Creating a Countdown Timer

Example

Try it Yourself »

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

Terkadang, 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

Twitter
Facebook

Menyukai ini:

Suka Memuat...

Terkait

di situs Anda tetapi masih bingung bagaimana langkah-langkahnya? Tak usah khawatir! Artikel ini akan mengulas segala hal yang perlu Anda ketahui mengenai countdown timer—mulai dari pengertian dan manfaatnya, hingga cara menambahkannya ke website menggunakan JavaScript dan plugin.

Daftar Isi

Apa Itu Countdown Timer dan Apa Saja Manfaatnya?

Sebagaimana namanya, countdown timer adalah jam virtual yang berfungsi untuk menghitung mundur waktu atau tanggal tertentu, serta menunjukan tanda dimulai atau berakhirnya suatu penawaran, acara, hingga live video. Tidak hanya di landing page, countdown timer juga biasanya ditampilkan di social media, dan bahkan jadi bagian dari strategi email marketing.

Lalu apa manfaatnya untuk Anda? Mari simak uraian berikut.

Menarik Perhatian Pengunjung

Secara psikologis, countdown timer menimbulkan apa yang disebut sebagai “a sense of urgency”—yang mana bisa memotivasi pengunjung untuk tidak melewatkan sesuatu atau mengambil suatu tindakan dengan cepat. Contohnya jika Anda memasang countdown timer untuk mengenalkan produk terbaru, pengunjung akan terdorong untuk menunggu waktu peluncuran tersebut.

Menyoroti Produk atau Jasa tertentu

Countdown timer juga bisa digunakan untuk menyoroti produk atau jasa khusus yang anda tawarkan. Jika Anda berniat mengadakan clearance sale atau menawarkan produk limited edition, misalnya, countdown timer bisa menunjukan kesan bahwa produk/jasa tersebut adalah spesial dan terbatas.

Meningkatkan Penjualan

Tak lupa, countdown timer juga bisa jadi cara untuk menjalankan apa yang dinamakan dengan psychology of scarcity marketing. Yaitu, memberi kesan bahwa produk serta penawaran Anda terbatas, sehingga mendorong customer untuk berlomba-lomba membeli sebelum waktunya berakhir.

Menaikkan Engagement

Menampilkan countdown timer di media sosial ataupun email juga bisa meningkatkan engagement dan conversions. Untungnya, beberapa social media termasuk Facebook dan Instagram menawarkan fitur tersebut, sedangkan platform seperti Sendtric dan CountdownMail menyediakan tools untuk kustomisasi countdown timer di email Anda.

Baca Juga: 7 Strategi Marketing Ampuh untuk Mendongkrak Omzet Penjualan

Membuat Countdown Timer dengan JavaScript

Setelah mengetahui apa itu countdown timer beserta manfaatnya, sekarang mari kita pelajari bagaimana cara memasangnya di website dengan menggunakan JavaScript.

Kabar baiknya, JavaScript menawarkan struktur kode yang sederhana, ringan, dan tak mengharuskan Anda memuat scripts maupun stylesheets eksternal—sehingga menjaga performa serta kecepatan situs Anda secara optimal. Selain itu, JavaScript memungkinkan Anda mendesain tampilan countdown timer sesuai dengan keinginan Anda, tanpa ada batasan seperti menggunakan plugins.

Dan adapun contoh kode JavaScript untuk membuat countdown timer adalah sebagai berikut:

<!-- Display the countdown timer in an element -->
<p id="demo"></p>

<script>
// Set a valid end date
var countDownDate = new Date("Jan 5, 2021 15:37:25").getTime();

// Update the count down every 1 second
var x = setInterval(function() {

  // Get today's date and time
  var now = new Date().getTime();

  // Find the distance between now and the countdown date
  var distance = countDownDate - now;

  // Calculate Remaining Time
  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);

  // Display the result in the element with id="demo"
  document.getElementById("demo").innerHTML = days + "d " + hours + "h "
  + minutes + "m " + seconds + "s ";

  // If the countdown is finished, write some text
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "EXPIRED";
  }
}, 1000);
</script>

Anda dapat mengubah beberapa bagian dalam kode tersebut sesuai dengan kebutuhan Anda, yang meliputi:

Set a valid end date — tentukan kapan waktu berakhirnya countdown.
Calculate Remaining Time — tuliskan kalkulasi waktu yang tersisa hingga countdown tersebut berakhir.
Display the result in the element — atur bagaimana hasil countdown tersebut nantinya akan ditampilkan.
If the countdown is finished, write some text — tentukan teks apa yang nantinya muncul setelah countdown berakhir.

Lalu, bagaimana caranya menambahkan kode tersebut ke dalam website? Nah jika Anda pengguna WordPress, Anda bisa menginput kode tersebut ke dalam file functions.php dengan mengakses Dashboard > Appearance > Theme Editor. Atau Anda juga bisa memanfaatkan beberapa plugins seperti Simple Custom CSS and JS dan CSS & JavaScript Toolbox Plus untuk memasukkan kode JavaScript dengan lebih mudah.

Baca Juga: Tips Belajar Javascript Untuk Mengembangkan Website

Membuat Countdown Timer dengan Plugins

Bingung dengan kode JavaScript? Tenang, ada banyak countdown plugins yang memungkinkan Anda membuat penghitung waktu mundur tanpa harus berurusan dengan kode yang panjang. Berikut beberapa opsinya:

Countdown Timer Ultimate

menyediakan puluhan desain timer yang bisa dikustomisasi sesuka hati. Kabar baiknya, countdown yang ditawarkan plugin ini juga sepenuhnya responsif dan bisa diintegrasikan dengan kupon ecommerce. Selain itu, plugin ini juga kompatibel dengan gutenberg maupun classic editor—sehingga Anda bisa menambahkan countdown di post atau halaman dengan mudah dan tanpa menghabiskan waktu yang lama.

Countdown Builder

Countdown Builder hadir dengan berbagai jenis countdown, mulai dari coming soon page, sticky countdown, circle popup, hingga WooCommerce coupons—semuanya bisa ditambahkan ke post maupun halaman website hanya dengan menginput shortcode sederhana seperti [ycd_countdown id=73].

WordPress Countdown Widget tak hanya bisa menampilkan countdown di post dan halaman, namun juga di sidebar. Yang paling menarik, plugin ini dibekali dengan fitur drag and drop serta kustomisasi warna; memungkinkan Anda membuat timer yang menarik dalam waktu singkat. Tak hanya countdown, Anda juga dapat membuat countup timer dengan mudah menggunakan plugin ini.

Nah cara mengaktifkan setiap plugins tersebut juga tidak sulit. Anda hanya perlu memasangnya melalui menu Plugins > Add New > kemudian tulis nama plugin dalam kolom search > klik Install Now > Activate. Jika proses instalasi telah selesai, Anda bisa langsung melakukan kustomisasi countdown timer dan menginput shortcode-nya ke posts, pages, maupun sidebar.

Bagaimana, tentunya semakin tertarik kan untuk memasang countdown timer di website Anda? Nah dari dua pilihan metode di atas, opsi mana yang akan Anda coba? Sebagai pertimbangan, JavaScript menawarkan struktur kode yang ringan dan kebebasan kustomisasi. Sedangkan