Today I will be sharing code for a cool jQuery countdown timer clock. You may have seen a lot of websites using a countdown clock while they are under maintenance or not online yet. These timers basically provide a way to tell visitor when the site will be online.
Sometime these timers are also called under construction timer or landing timer. All countdown in jQuery 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.
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: 0 auto; padding: 20px 0 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: 0 18px 0 3px; padding: 4px 0 40px 3px; position: relative; background: transparent url(http://web-zone.com.ua/assets/samples/timer/i/sprites.png) no-repeat -260px 0;}.c-block:before{ content: ''; position: absolute; left: 100%; top: 0; 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: 0; 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(); }}); |
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.
