A CodePen by Arpit Rawat. NewYear Countdown Timer - Simple countdown timer using moment js library. Forked from - http://codepen.io/msurguy/pen/pxIEz, http://jsdo.it/chabudai/4K7S

index.html

<div id="canvas">
<div id="month1"></div>
<div id="month2"></div> 
<div id="day1"></div>
<div id="day2"></div>  
<div id="hour1"></div>
<div id="hour2"></div>
<div id="minute1"></div>
<div id="minute2"></div>
<div id="second1"></div>
<div id="second2"></div>
</div>

script.js

    var newYearTime = '1388534400'; //Wed, 01 Jan 2014 00:00:00 GMT. Timstamp
    var currentTime = moment().format('X'); //Thu, 24 Jan 2013 13:00:00 GMT. Timestamp

    var diffTime = newYearTime - currentTime; //better to handle this in Controller to avoid timezone problem
    var duration = moment.duration(diffTime, 'seconds');
    var interval = 1;

    setInterval(function () {
        duration = moment.duration(duration.asSeconds() - interval, 'seconds');

        var _url = "http://www.chabudai.org/temp/wonderfl/honehone/img/";

        var month1;
        month = duration.months();
        if(month < 10){
          month1 = 0;
        }else{
          month1 = Math.floor(month / 10);
        }

        var month2 = month%10;
      
        var day1;
        day = duration.days();
        if(day < 10){
          day1 = 0;
        }else{
          day1 = Math.floor(day / 10);
        }

        var day2 = day%10;
    
        var hour1;
        hour = duration.hours();
        if(hour < 10){
          hour1 = 0;
        }else{
          hour1 = Math.floor(hour / 10);
        }

        var hour2 = hour%10;
    
        var minute1;
        minute = duration.minutes();
        if(minute < 10){
          minute1 = 0;
        }else{
          minute1 = Math.floor(minute / 10);
        }

        var minute2 = minute%10;
    
        var second1;
        second = duration.seconds();
        if(second < 10){
          second1 = 0;
        }else{
          second1 = Math.floor(second / 10);
        }
        var second2 = second%10;

        $('#month1').css("background-image", "url("+_url+"h" + month1 + ".gif)");
        $('#month2').css("background-image", "url("+_url+"hh" + month2 + ".gif)").text('Months');
        $('#day1').css("background-image", "url("+_url+"h" + day1 + ".gif)");
        $('#day2').css("background-image", "url("+_url+"hh" + day2 + ".gif)").text('Days');
        $('#hour1').css("background-image", "url("+_url+"h" + hour1 + ".gif)");
        $('#hour2').css("background-image", "url("+_url+"hh" + hour2 + ".gif)").text('Hours');
        $('#minute1').css("background-image", "url("+_url+"m" + minute1 + ".gif)");
        $('#minute2').css("background-image", "url("+_url+"mm" + minute2 + ".gif)").text('Minutes');
        $('#second1').css("background-image", "url("+_url+"s" + second1 + ".gif)");
        $('#second2').css("background-image", "url("+_url+"ss" + second2 + ".gif)").text('Seconds');
  }
, 1000);

style.css

html,body { margin:0px; padding:0px; background-color : #fff; }
#canvas{
position: absolute;
width: 650px;
height: 650px;
background-color : #fff;
background-repeat: no-repeat;
background-image: url(http://www.chabudai.org/temp/wonderfl/honehone/img/tenten.gif);
color:red;
font-weight:bold;
}
#month1{
position: absolute;
width: 80px;
height: 100px;
top: 170px;
left: 40px;
background-repeat: no-repeat;
background-image: url(http://www.chabudai.org/temp/wonderfl/honehone/img/honehone1.gif);
}
#month2{
position: absolute;
width: 80px;
height: 100px;
top: 170px;
left: 80px;
background-repeat: no-repeat;
background-image: url(http://www.chabudai.org/temp/wonderfl/honehone/img/honehone1.gif);
}
#day1{
position: absolute;
width: 80px;
height: 100px;
top: 170px;
left: 170px;
background-repeat: no-repeat;
background-image: url(http://www.chabudai.org/temp/wonderfl/honehone/img/honehone1.gif);
}
#day2{
position: absolute;
width: 80px;
height: 100px;
top: 170px;
left: 210px;
background-repeat: no-repeat;
background-image: url(http://www.chabudai.org/temp/wonderfl/honehone/img/honehone1.gif);
}
#hour1{
position: absolute;
width: 80px;
height: 100px;
top: 170px;
left: 300px;
background-repeat: no-repeat;
background-image: url(http://www.chabudai.org/temp/wonderfl/honehone/img/honehone1.gif);
}
#hour2{
position: absolute;
width: 80px;
height: 100px;
top: 170px;
left: 340px;
background-repeat: no-repeat;
background-image: url(http://www.chabudai.org/temp/wonderfl/honehone/img/honehone1.gif);
}
#minute1{
position: absolute;
width: 80px;
height: 100px;
top: 170px;
left: 430px;
background-repeat: no-repeat;
background-image: url(http://www.chabudai.org/temp/wonderfl/honehone/img/honehone1.gif);
color:red;
font-weight:bold;
}
#minute2{
position: absolute;
width: 80px;
height: 100px;
top: 170px;
left: 470px;
background-repeat: no-repeat;
background-image: url(http://www.chabudai.org/temp/wonderfl/honehone/img/honehone1.gif);
}
#second1{
position: absolute;
width: 80px;
height: 100px;
top: 170px;
left: 560px;
background-repeat: no-repeat;
background-image: url(http://www.chabudai.org/temp/wonderfl/honehone/img/honehone1.gif);
}
#second2{
position: absolute;
width: 80px;
height: 100px;
top: 170px;
left: 600px;
background-repeat: no-repeat;
background-image: url(http://www.chabudai.org/temp/wonderfl/honehone/img/honehone1.gif);
}