Create a Countdown Clock for the purposes of 1 Hour Promo

If you happened to be holding promos and goods and service also aired on the blog, maybe one of the ways to attract the interest of visitors to follow ongoing promo can be tested by adding a countdown.
With such expected visitors will jump list or follow the promo because see calculate a pullback so they feel worried not goto the promo hehehe ....
For that I find simple countdown with javascript in JSFiddle Snippet. which later became Fox I look H:M:S and add the style as in the Fiddle below.
Demo

If interested to try it out please use the codes below.
1. Copy the CSS code below and save it in the style of your blog.

@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')
}
.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;
}
@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')
}
Then save this javascript code at the top of the </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>
Then his countdown to display using the HTML code below

<div class="countdown">
  <span class="countdown_text">Registration closes in</span>
  <span id="time">01:00:00</span>
  <span>minutes!</span>
</div>

Okay. Good luck.
So the article today about Create a Countdown Clock for the purposes of 1 Promo, hopefully can help your problem about countdown timer.

Subscribe to receive free email updates:

0 Response to "Create a Countdown Clock for the purposes of 1 Hour Promo"

Post a Comment

Bila Ada posting yang kurang, atau error atau yang lainnya, silahkan tinggalkan komentar agar artikel/post di perbaiki.
Jangan Lupa Cek Box "Notify Me" agar tahu komentar kamu dibalas oleh saya.

If there are any posts that are missing, or error or anything else, please leave a comment for the article / post to be fixed.
Do not Forget Check Box "Notify Me" to know our comments replied by me.