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.