Creare una barretta che si riempie

[maxolino]

Ciao a tutti,
ho la necessità di mostrare l'avazamento di un barretta che non vada a "scatti".

Mi spiego meglio, ho fatto una piccola funzione che calcola il numero di secondi rimasti, e in base a quelli una tabella cambia la larghezza di un td mostrando l'avanzamento.
Il problema è che mi fa uno scatto al secondo.... se il tutto dura 10 secondi (considerando che la tabella è larga 200 pixel), ogni secondo la tabella si allarga con uno scatto di 20 pixel.

Il codice è il seguente:

<table width="100" id="tabella" style="font-size:9px; border:1px solid #000000;" cellpadding="0" cellspacing="0">
	<tr>
    	<td id="tb2"></td>
        <td id="tbl" bgcolor="#FFFFFF"></td>
    </tr>
</table>
<div id="bx" class="biancone">
<script type="text/javascript">v=new Date();
var bx=document.getElementById('bx');
function t(){
n=new Date();
/*QUI METTO I SECONDI CHE MANCANO*/
s=7-Math.round((n.getTime()-v.getTime())/1000.);
m=0;
h=0;

if(s<0){
	location.href='crafting.asp?tc=4&8062,098';
	bx.innerHTML='Completed: continue';
	document.getElementById('tbl').style.width=1;
	window.setTimeout("t();",99999);
	}
else{
document.getElementById('tbl').style.width=Math.floor((s*100/7)+1);
if(s>59){m=Math.floor(s/60); s=s-m*60}
if(m>59){h=Math.floor(m/60); m=m-h*60}
if(s<10){s="0"+s}
if(m<10){m="0"+m}
bx.innerHTML=h+" hours "+m+" minutes "+s+' seconds'}
document.title=h+':'+m+':'+s+';
window.setTimeout("t();",999);
}
window.onload=t;

</script>

Come posso strutturare la funzione in modo che non vada a scatti?
Forse dovrei calcolarla sui decimi di secondi invece che sui secondi?
Bohhhhh

Grazie mille!!!

[fcaldera]

se hai abbastanza tempo per approfondire:

http://www.julienlecomte.net/blog/2007/10/28/