Anonymní profil peter – Programujte.com

<style>
div .text {width:100px;display:inline-block;}
div .bar {width:0; height:10px; background:#080; display:inline-block;}
</style>

<div id="timer_div0"><div class="text"></div><div class="bar"></div></div>
<div id="timer_div1"></div>
<div id="timer_div2"></div>

<script>
function classTimer(data)
{
var root = this;
this.timer = null;
this.timer_step  = 300;	//ms
this.num  = 0;
this.num_min  = 0;
this.num_max  = 100;
this.num_step  = 10;
this.data = null
this.init = function(data)
	{
	this.data = data;
	this.num_step = (data.time_end - data.time_start) / (this.timer_step * this.num_max);
	this.num = this.num_max;
	}
this.stopTimer = function()
	{
	if (this.timer!=null)
		{
		clearInterval(this.timer);
		}
	}
this.func = {};
this.func.start = null;
this.func.stop  = null;
this.func.run   = null;
this.start = function()
	{
	root.stopTimer();
	if (root.func.start) {root.func.start(root);}
	root.timer = setInterval(root.run, root.timer_step);
	}
this.stop = function()
	{
	root.stopTimer();
	this.num = this.num_min;
	if (root.func.stop) {root.func.stop(root);}
	}
this.run = function()
	{
	root.num -= root.num_step;
	if (root.func.run) {root.func.run(root);}
	if (root.num<=0)
		{
		root.stop();
		}
	};
this.init(data);
}

function write(timer)
{
var patt, bar, now;
patt = '\
<span class="text">{0}<\/span> \
<span class="bar" style="width:{1}px;"><\/span> \
<span class="num">{2}<\/span>\
';
bar  = Math.floor(1 * timer.num);
bar  = bar<0 ? 0 : bar;
now = getNow();
document.getElementById(timer.data.id).innerHTML = 
  patt
    .replace('{0}', timer.data.action)
    .replace('{1}', bar)
    .replace('{2}', (Math.round((100 - timer.num)*10)/10)+'%')
	;
}

function addNow(now,min) {return Math.floor(now + min * 60 * 1000);}
function getNow() {return new Date().getTime();}

var  tab,i,timers, now,n, str;
now = getNow();
tab = [
	{name:'pepa', action:'noseni klacku', time_start:addNow(now,1), time_end:addNow(now,1.2)},
	{name:'pepa', action:'privolani'    , time_start:addNow(now,0), time_end:addNow(now,0.7)},
	{name:'pepa', action:'plavani'      , time_start:addNow(now,0), time_end:addNow(now,5)}
	];

timers = [];
str = '';
for (i=0; i<tab.length; i++)
{
tab[i].id = 'timer_div'+i;
timers[i] = new classTimer(tab[i]);
timers[i].func.start = write;
timers[i].func.stop  = write;
timers[i].func.run   = write;
now = getNow();
if (now<tab[i].time_end)
	{
	if (now>tab[i].time_start)
		{
		timers[i].start();
		}
	else
		{
		n = Math.floor(tab[i].time_start - now); //ms
		timers[i].func.start(timers[i]);
		timers[i].timer = setTimeout(timers[i].start, n);
		}
	}
}

</script>