rss feed Twitter Page Facebook Page Github Page Stack Over Flow Page

Build a fancy countdown with HTML5

HTML5 brings us to a new level when developing fancy features on our website(s). Developers and designers used to build all these fancy animation and gadgets, and let's face it, that was horrible. Hours or development for something we look and say: Yay! I made it.

With that said, I was looking for a countdown for a project I am working on, and I found a way to build it in few line of code.

So Here's the code:

HTML

<!DOCTYPE HTML>
<html>
  <head>
  <title>test</title>
  <style type="text/css">
    body {
      background: #ddd;
      margin: 0px;
      padding: 0px;
    }

    #countDown {
      height: 182px;
      position: relative;
      width: 182px;
    }

    #countDown #timeLeft {
      color: #00850D;
      font: bold 25px Tahoma;
      left: 0;
      line-height: 128px;
      position: absolute;
      text-align: center;
      top: 0;
      width: 100%;
    }
  </style>
</head>

<body>

<div id="countDown">
  <canvas id="canvas" width="190px" height="190px"> </canvas>
  <p id="timeLeft">loading ...</p>
</div>

<button class="reset" data-time="15">Start Over</button>
<button class="reset" data-time="10">Start from 10 </button>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="countdown.js"></script>

</body>
</html>

Javascript

function zeroFill(number, width) {
  width -= number.toString().length;
  if (width > 0)
  {
    return new Array(width + (/\./.test(number) ? 2 : 1) ).join('0') + number;
  }
  return number + '';
}


var clock = {
  start: 0,
  end: 15,
  current: 0,
  seconds: 0,

  draw: function(clr) {
    if(clock.seconds > clock.end) {
      clearInterval(countDown);
      $('.reset').attr('disabled', true);
      $("#countDown #timeLeft").css({'fontSize':'45px','lineHeight':'85px'}).html('done');
      return;
    }
    var color = (clock.seconds*15+8);
    var hex = color.toString(16);
    var color = '#' + zeroFill(hex,2) + '850D';
    var canvas = $("#canvas").get(0);
    cv = canvas.getContext("2d");
    if(clr) {
      cv.clearRect(0, 0, canvas.width, canvas.height);
    }
    cv.beginPath();
    cv.strokeStyle = '#' + zeroFill(hex,2) + '850D';

    var startAngle = (Math.PI/180) * 0 - (Math.PI/180) * 90;
    var endAngle = (Math.PI/180) * ((360/(clock.end - clock.start)) * ((clock.current - clock.start) + clock.seconds)) - (Math.PI/180) * 90;
    cv.arc(90, 90, 75, startAngle, endAngle);
    cv.lineWidth = 15;
    cv.stroke();
    $("#countDown #timeLeft").css({'color' : color, 'fontSize':'65px','lineHeight':'50px'}).html(Math.round((clock.end - clock.current) - clock.seconds));
    clock.seconds++;
  }
}
var countDown = setInterval(
  function() { clock.draw(false); },
  1000
);

$('.reset').click(function() {
  var time = $(this).data('time');
  clock.start = 0;
  clock.end = time;
  clock.current = 0;
  clock.seconds = 0;
  $("#countDown #timeLeft").html(time);
  clock.draw(true);
});