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
| <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
function rebour_multiple(tempsDebut,tempsFin){
this.tempsDebut=parseInt(tempsDebut);
this.tempsFin=parseInt(tempsFin);
var that=this;
rebour();
function rebour(){
var date1 = new Date().getTime();
var date2 = new Date(tempsDebut).getTime();
var date3 = new Date(tempsFin).getTime();
var bar=document.getElementById('genebar');
if(date2>date3){
bar.style.width= bar.parentNode.offsetWidth+'px';
}
else{
var mls = 1/(date3 - date2);
var ecoule=(date1 - date2);
var ecoule2=mls*ecoule;
bar.style.width=(bar.parentNode.offsetWidth-50)* ecoule2+'px'; //50 c'est la marges total de la gauche et la droit de l'image gradué
document.getElementById('pourcentage').firstChild.nodeValue=(ecoule2*100).toFixed(4)+' %'
}
setTimeout(rebour, 1000);
}
}
function initcompteur(){
new rebour_multiple('02/18/2013 12:55:20','03/15/2013 23:00:00'); //date de debut et de fin
}
if(typeof window.addEventListener == 'undefined'){
window.attachEvent('onload', initcompteur);
}
else{
window.addEventListener('load', initcompteur, false);
}
</script>
</head><body style='background: #333333'>
<h1 id="pourcentage" style='color:white;margin-left:48%'>00 %</h1>;
<br>
<br>
<div style='height:109px;width:960px;margin:auto;background: #333333 url("http://farmaciacaloini.com/comingsoon/css/images/progress-container.png")'>
<img id='genebar' src='http://farmaciacaloini.com/comingsoon/css/images/ui-bg_gloss-wave_75_2191c0_500x100.png' style='height:40px;margin-top:15px;margin-left:25px;width:500px'>
</div>
</body></html> |