Несколько таймеров на одной странице.
 

Доброго вечера всем.

Итак суть вопроса в следующем:

Есть страница, на которой необходимо расположить н-ное кол-во таймеров отсчета до указанной даты (для каждого таймера целевая дата своя).
Для таймера используется вот такой скрипт расположенный в main.js

$(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', 'i/sprites.png');
	} else {
		$('div.bl-inner span').show();
	}
});

Дата определяется кусочком кода в <head> </head>

<script>
timeend= new Date();
timeend= new Date(2013, 6-1, 1, 10, 59);

today = new Date();
today = Math.floor((timeend-today)/1000);
tsec=today%60; today=Math.floor(today/60); if(tsec<10)tsec='0'+tsec;
tmin=today%60; today=Math.floor(today/60); if(tmin<10)tmin='0'+tmin;
thour=today%24; today=Math.floor(today/24);
$(function(){
$('.c-block:eq(0) .bl-inner span').text(today);
$('.c-block:eq(1) .bl-inner span').text(thour);
$('.c-block:eq(2) .bl-inner span').text(tmin);
$('.c-block:eq(3) .bl-inner span').text(tsec);
});

</script>

html код выводящий сам таймер следующий

<div class="time">
				<em class="clock"></em>
				<div class="c-block c-block-3"><div class="bl-inner"><span></span></div> <span class="etitle etitle-1">дней</span></div> <ins></ins>
				<div class="c-block c-block-2"><div class="bl-inner"><span></span></div> <span class="etitle etitle-2">часов</span></div> <ins></ins>
				<div class="c-block c-block-2"><div class="bl-inner"><span></span></div> <span class="etitle etitle-3">минут</span></div> <ins></ins>
				<div class="c-block c-block-2"><div class="bl-inner"><span></span></div> <span class="etitle etitle-4">секунд</span></div>
			</div>

Так вот, как размножить этот таймер, с условием, что для каждого таймера своя целевая дата?

Пробовал дублировать то что в скрипте в head и присваивать переменным индексы типа timeend_2 и т.п. но конечно ничего не вышло, более того оба экземпляра таймера не работали..

Подскажите, как это можно реализовать, или хотя бы направьте в нужное русло, буду очень благодарен))

В конце этой темы я направил человека в нужное русло. У Вас практически аналогичный случай. Хотя странно, что Вы не наткнулись на эту тему, когда воспользовались поиском по форуму и в гугле.