Cool JQuery Countdown Timer Tutorial for ASP.NET

Today I will be sharing code for a cool jQuery countdown timer. Probably you seen a lot of website using a countdown timer while they are under maintenance or not online yet. These timers basically  provides a way to tell visitor when the site will be online.

Sometime these timers are also called under construction timer or landing timer. All jQuery countdown timers found online are simple HTML and you have to convert it into your specific server language. I have already coded the timer for ASP.NET websites. The code will fetch current date-time as UTC and will count remaining time for timer by subtracting it to predefine upTime as UTC.

jquery countdown timer

CSS Code

Put the following code in your stylesheet and link it in the page where you want to display the timer (countdownTimer.aspx) :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
.time{
 display: block;
    margin: auto;
    padding: 20px 50px;
    position: relative;
    text-align: center;
    width: 70%;
}
.time *{vertical-align: top;}
.time ins,
.time .clock{
 position: relative;
 top: 10px;
 width: 40px;
 height: 55px;
 display: inline-block;
 *display: inline;
 zoom: 1;
 background: transparent url(http://web-zone.com.ua/assets/samples/timer/i/sprites.png) no-repeat -260px -154px;
}
.time .clock{margin-right: 7px;}
.time ins{width: 10px;}
.time ins{background-position: -300px -154px;}
.time .etitle{
 position: absolute;
 width: 110px;
 text-align: center;
 left: 50%;
 margin-left: -47px;
 top: 55px;
 line-height: 30px;
}
.etitle-1{font-size: 1.6em;}
.etitle-2{
 font-size: 1.37em;
 padding-top: .1em;
}
.etitle-3{
 font-size: 1.12em;
 padding-top: .2em;
}
.etitle-4{
 font-size: .87em;
 padding-top: .3em;
}
.c-block{
 display: inline-block;
 *display: inline;
 zoom: 1;
 margin: 18px 3px;
 padding: 4px 40px 3px;
 position: relative;
 background: transparent url(http://web-zone.com.ua/assets/samples/timer/i/sprites.png) no-repeat -260px ;
}
.c-block:before{
 content: '';
 position: absolute;
 left: 100%;
 top: ;
 width: 31px;
 background: transparent url(http://web-zone.com.ua/assets/samples/timer/i/sprites.png) no-repeat 100% -77px;
 height: 77px;
}
.bl-inner{
 position: relative;
 margin-right: -10px;
 height: 48px;
 background: transparent url(http://web-zone.com.ua/assets/samples/timer/i/sprites.png) no-repeat -5px -48px;
}
.bl-inner span{
 display: none;
 font-size: 46px;
 color: #fff;
 line-height: 46px;
 margin-left: 2px;
}
.bl-inner:before{
 content: '';
 position: absolute;
 left: 100%;
 top: ;
 width: 3px;
 background: transparent url(http://web-zone.com.ua/assets/samples/timer/i/sprites.png) no-repeat -122px -48px;
 height: 48px;
}
.c-block-1{width: 20px;}
.c-block-2{width: 45px;}
.c-block-3{width: 70px;}

JavaScript Code

Here is the javascript the code which runs the timer and You don’t need to understand the code.Just add this code in a new javascript file and link also it in countdownTimer.aspx :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
$(function() {
 
 if (document.createElement('canvas').getContext) {
  var image = $('<img />').load(function() {
   var image = this,
    offset_left = 5,
    offset_number = 4;
   
   function drawNumberLine(context, position, number, line) {
    context.drawImage(image, number * 25, line, 25, 1, position * 25 + offset_left + offset_number, line, 25, 1);
   }
   
   function drawNumberBottom(context, position, number) {
    context.drawImage(image, number * 25, 25, 25, 23, position * 25 + offset_left + offset_number, 25, 25, 23);
   }
   
   function drawNumberTop(context, position, number) {
    context.drawImage(image, number * 25, 0, 25, 23, position * 25 + offset_left + offset_number, 0, 25, 23);
   }
   
   function cf_draw(from, to, canvas, step) {
    var context = canvas.getContext('2d'),
     offsets = [
              {w: 2,  h: -2},
              {w: 4,  h: -5},
              {w: 6,  h: -9},
              {w: 8,  h: -14},
              {w: 10, h: -20},
              {w: 0,  h:  0},
              {w: 10, h: -20},
              {w: 8,  h: -14},
              {w: 6,  h: -9},
              {w: 4,  h: -5},
              {w: 2,  h: -2},
              {w: 0,  h:  0}
     ],
     width = canvas.width,
     nwidth = width + offsets[step].w,
     maxscale = nwidth/width,
     height = 23,
     nheight = height + offsets[step].h,
     scale_y = nheight / height,
     dig_col = parseInt($(canvas).parents('div.c-block')[0].className.substr(-1), 10);
    
    from = from.toString();
    to = to.toString();
    
    while (from.length < dig_col) {from = '0' + from;}
    while (to.length < dig_col) {to = '0' + to;}
    
    
    context.clearRect(0, 0, width, canvas.height);
    context.save();
 
    for (var j = 0; j <= to.length - 1; j++) {
     drawNumberTop(context, j, to[j]);
    }
    
    if (step == 11) {
     for (var j = 0; j <= to.length - 1; j++) {
      drawNumberBottom(context, j, to[j]);
     }
     return;
    }
    
    
    for (var j = 0; j <= from.length - 1; j++) {
     drawNumberBottom(context, j, from[j]);
    }
 
    // draw bg
    context.drawImage(image, 0, 96 + step * 48, width - 5, 48, 0, 0, width - 5, 48);
    context.drawImage(image, 125, 96 + step * 48, 4, 48, width - 5, 0, 5, 48);
 
    for (var i = 0; i < 24; i++) {
     if (step < 5) {
      context.setTransform(maxscale - (maxscale - 1) * i / 23, 0, 0, scale_y, -(nwidth - width) / 2 * (1 - i / 23), -offsets[step].h);
      for (var j = 0; j <= from.length - 1; j++) {
       drawNumberLine(context, j, from[j], i);
      }
     }
     
     if (step > 5) {
      context.setTransform(1 + (maxscale - 1) * i / 23, 0, 0, scale_y, -(nwidth - width) / 2 * (i / 23), -offsets[step].h);
      for (var j = 0; j <= to.length - 1; j++) {
       drawNumberLine(context, j, to[j], 25+i);
      }
     }
     context.restore();
    }
    context.setTransform(1, 0, 0, 1, 0, 0);
 
    // draw blick
    context.drawImage(image, 130, 96 + step * 48, width - 5, 48, 0, 0, width - 5, 48);
    context.drawImage(image, 255, 96 + step * 48, 4, 48, width -5, 0, 5, 48);
   }
    
   function cf_animate(from, to, canvas, step) {
    cf_draw(from, to, canvas, step);
    step ++;
    if (step > 11) return;
 
    setTimeout(function() {
     cf_animate(from, to, canvas, step);
    }, 50 - 20 * step/11);
   }
   
   function seconds(from, canvas) {
    var to = from - 1;
    
    if (from <= 0) {
     to = 59;
     
     // minutes animate
     var minutes_from = parseInt($('span', minutes_cnt).text(), 10);
     var minutes_to = minutes_from - 1;
     
     if (minutes_from <= 0) {
      minutes_to = 59;
      
      // hourses animate
      var hourses_from = parseInt($('span', hourses_cnt).text(), 10);
      var hourses_to = hourses_from - 1;
      
      if (hourses_from <= 0) {
       hourses_to = 23;
       
       var days_from = parseInt($('span', days_cnt).text(), 10);
       var days_to = days_from - 1;
       
       if (days_from == 0) {
        return;
       }
       cf_animate(days_from, days_to, $('canvas', days_cnt)[0], 0);
       $('span', days_cnt).text(days_to);
      }
      cf_animate(hourses_from, hourses_to, $('canvas', hourses_cnt)[0], 0);
      $('span', hourses_cnt).text(hourses_to);
     }
 
     cf_animate(minutes_from, minutes_to, $('canvas', minutes_cnt)[0], 0);
     $('span', minutes_cnt).text(minutes_to);
    }
   
    cf_animate(from, to, canvas, 0);
    
    from--;
    if (from < 0) {from = 59;}
 
    setTimeout(function() {
     seconds(from, canvas);
    }, 1000);
   }
   
   
   $('div.bl-inner').each(function() {
    var canvas = $('<canvas></canvas>').css({
     position: 'absolute',
     left: -5,
     top: 0
    }).appendTo(this)[0];
    
    canvas.width = $(this).width() + offset_left * 2 + 3;
    canvas.height = $(this).height();
    
    cf_draw(parseInt($('span', this).text(), 10), parseInt($('span', this).text(), 10), canvas, 11);
   });
   
   var seconds_cnt = $('div.time .bl-inner:last'),
    minutes_cnt = $('div.time .bl-inner:eq(2)'),
    hourses_cnt = $('div.time .bl-inner:eq(1)'),
    days_cnt  = $('div.time .bl-inner:eq(0)');
 
   seconds(parseInt($('span', seconds_cnt).text(), 10), $('canvas', seconds_cnt)[0]);
  });
  image.attr('src', 'http://web-zone.com.ua/assets/samples/timer/i/sprites.png');
 } else {
  $('div.bl-inner span').show();
 }
});

 

READ  Indian Government Officially Blocks 219 Websites

countdownTimer.aspx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<body>
    <form id="form1" runat="server">
    <div>
    <div class="header">  
   <div class="time">
    <em class="clock"></em>
    <div class="c-block c-block-3"><div class="bl-inner"><asp:Label ID="LabDays" runat="server" Text="20"></asp:Label></div><span class="etitle etitle-1">days</span></div> <ins></ins>
    <div class="c-block c-block-2"><div class="bl-inner"><asp:Label ID="LabHours" runat="server" Text="20"></asp:Label></div> <span class="etitle etitle-2">hours</span></div> <ins></ins>
    <div class="c-block c-block-2"><div class="bl-inner"><asp:Label ID="LabMinute" runat="server" Text="20"></asp:Label></div> <span class="etitle etitle-3">minutes</span></div> <ins></ins>
    <div class="c-block c-block-2"><div class="bl-inner"><asp:Label ID="LabSeconds" runat="server" Text="20"></asp:Label></div> <span class="etitle etitle-4">seconds</span></div>
   </div>
  </div><!-- /.header -->
    </div>
    </form>
</body>

 

countdownTimer.cs

Add the following lines of code on page load of this page and replace the ‘upTime’ values with yours. Remeber the code deals with date-time as UTC.

1
2
3
4
5
6
7
8
9
10
// all date and time should be in Utc
        DateTime upTime = new DateTime(2013,03,22); // Utc time (year,month, day) when your website will be active | day is 1 through 30\31 a valid day
        DateTime nowTime = new DateTime();
        nowTime = DateTime.UtcNow; //system's current Utc date-time
        //getting remaining time and setting it to timer
        LabDays.Text = upTime.Subtract(nowTime).Days.ToString();
        LabHours.Text = upTime.Subtract(nowTime).Hours.ToString();
        LabMinute.Text = upTime.Subtract(nowTime).Minutes.ToString();
        LabSeconds.Text = upTime.Subtract(nowTime).Seconds.ToString();

 

One more Thing

Don’t forget to add jQuery. Add the following script link in countdownTimer.aspx :

1
2
<script src="/web/20150711121119js_/http://code.jquery.com/jquery-1.9.1.min.js">
</script>

Hope you like the post. If you find any mistake in my code then please let me know. And do comment.

READ  Best Javascript Books

Leave a Reply

Your email address will not be published. Required fields are marked *