Membuat Countdown 1 Jam Untuk Keperluan Promo

Ditulis oleh: Adhy Suryadi

Ditulis pada: 8/24/2017

Jika Anda kebetulan sedang mengadakan promo baik barang maupun jasa dan ditayangkan di blog, mungkin salah satu cara untuk menarik minat pengunjung untuk mengikuti promo yang sedang berlangsung bisa dicoba dengan menambahkan countdown.

Dengan begitu diharapkan pengunjung akan langsung daftar atau mengikuti promo karena melihat hitung mundurnya sehingga mereka merasa khawatir tidak kebagian promo hehehe....

Untuk itu saya menemukan simple countdown dengan javascript di JSFiddle yang kemudian saya rubah menjadi tampilan H:M:S dan menambahkan style seperti pada Fiddle di bawah ini.


Jika tertarik untuk mencobanya silahkan gunakan kode-kode di bawah ini.

Copy kode CSS di bawah ini dan simpan di style blog Anda.

@font-face {

  font-family: Roboto;

  font-style: normal;

  font-weight: 400;

  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v16/CWB0XYA8bzo0kSThX0UTuA.woff2) format('woff2'), url(https://fonts.gstatic.com/s/roboto/v16/2UX7WLTfW3W8TclTUvlFyQ.woff) format('woff'), url(https://fonts.gstatic.com/s/roboto/v16/QHD8zigcbDB8aPfIoaupKOvvDin1pK8aKteLpeZ5c0A.ttf) format('truetype')

}

@font-face {

  font-family: Roboto;

  font-style: normal;

  font-weight: 700;

  src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v16/d-6IYplOFocCacKzxwXSOFtXRa8TVwTICgirnJhmVJw.woff2) format('woff2'), url(https://fonts.gstatic.com/s/roboto/v16/d-6IYplOFocCacKzxwXSOD8E0i7KZn-EPnyo3HZu7kw.woff) format('woff'), url(https://fonts.gstatic.com/s/roboto/v16/d-6IYplOFocCacKzxwXSOCZ2oysoEQEeKwjgmXLRnTc.ttf) format('truetype')

}

.countdown {

  font-family: Roboto, sans-serif;

  font-size: 16px;

  font-weight: 400;

}

.countdown .countdown_text {

  display: block;

}

#time {

  font-family: Roboto, sans-serif;

  font-size: 40px;

  font-weight: 700;

  vertical-align: middle;

}

Kemudian simpan kode javascript ini di atas </body>

<script>

//<![CDATA[

function startTimer(duration, display) {

  var timer = duration, hours, minutes, seconds;

  setInterval(function() {

    hours = parseInt(timer / 3600, 10);

    minutes = parseInt(timer % 3600 / 60, 10);

    seconds = parseInt(timer % 60, 10);



    hours = hours < 10 ? "0" + hours : hours;

    minutes = minutes < 10 ? "0" + minutes : minutes;

    seconds = seconds < 10 ? "0" + seconds : seconds;



    display.textContent = hours + ":" + minutes + ":" + seconds;



    if (--timer < 0) {

      timer = duration;

    }

  }, 1000);

}



window.onload = function() {

  var fiveMinutes = 60 * 60,

    display = document.querySelector('#time');

  startTimer(fiveMinutes, display);

};

//]]>

</script>

Kemudian untuk menampilkan countdown-nya gunakan kode HTML di bawah ini

<div class="countdown">

  <span class="countdown_text">Registration closes in</span>

  <span id="time">01:00:00</span>

  <span>minutes!</span>

</div>