Hola a todos,
Hice un contador en el que los números son imágenes. Además con Jquery le he puesto un efecto de fadIn y fadeout para cuando se cambia de número el caso es que algunas veces se come un número, en vez de hacer la secuencia 4,3,2,1 hace 4,4,2,1 creo que es porque no le da tiempo a cargar la imagen del 3, pero no estoy seguro porque quizás debería no mostrar nada y no el numero 4 dos veces.
Os dejo el código a ver que veis.
Código HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script src="/jquery.js"></script>
<script>
var i;
var imagenes = new Array("numeros/0.png","numeros/1.png","numeros/2.png","numeros/3.png","numeros/4.png","numeros/5.png","numeros/6.png","numeros/7.png","numeros/8.png","numeros/9.png");
var lista_imagenes = new Array();
for(i in imagenes){
lista_imagenes[i] = new Image();
lista_imagenes[i].src = imagenes[i];
}
var seg2 = 0;
var seg1 = 0;
var hor3 = 0;
var hor2 = 0;
var hor1 = 0;
var min2 = 0;
var min1 = 0;
alert(lista_imagenes[2].src);
function divide(i,dato){
if (dato> 9) {
aux = parseInt(dato / 10);
res2 = Math.round(aux % 10);
res1 = dato%10;
switch(i){
case 0:{seg2 =res2;
seg1 = res1;break; }
case 1:{min2 =res2;
min1 = res1;break; }
case 2:{
aux = parseInt(dato / 100);
hor3 = Math.round(aux % 10);
res1 = dato%10;
hor2 =res2;
hor1 = res1;break; }
}
}
else{
switch(i){
case 0:{seg2 =0;
seg1 = (dato*10)/10;
;break; }
case 1:{min2 =0;
min1 = (dato*10)/10;break; }
case 2:{hor2 =0;
hor3 = 0;
hor1 = (dato*10)/10;break; }
}
}
}
function getFecha(){
clock = new Date();
seg = 60- clock.getSeconds();
min = 60 - clock.getMinutes();
aux = 10 - clock.getHours();
dia = 14 - clock.getDate();
hora= dia*24 + aux;
if(seg==60){
seg=0; }
if(seg>0){
min-=1;
}
if((min<0)&&(hora!=0)){
min+=60;
}
if((min>0)&&(hora>=1)){
hora-=1;
}
if (min<10) {
bmin = "0"+min;
}
else{bmin=min;}
if (seg<10) {
seg = "0"+seg;
}
if(hora<10){
hora="0"+hora;
}
if (min>=0){
/*que_hora.text = hora;// hora+ ":"+ bmin+":"+seg;
que_minuto.text = min;
que_segundo.text = seg;*/
}
else
{ }
divide(0,seg);
divide(1,min);
divide(2,hora);
//alert(val);
$('#segundos_1').fadeOut('fast',function(){
$(this).attr('src',lista_imagenes[seg1].src);
$(this).fadeIn('fast');
});
var ant = $('#segundos_2').attr('src');
var act = "numeros/"+seg2+".png";
if(ant!=act)
$('#segundos_2').fadeOut('fast',function(){
$(this).attr('src',lista_imagenes[seg2].src);
$(this).fadeIn('slow');
});
ant1 = $('#horas_2').attr('src');
act1 = "numeros/"+hor2+".png";
if(ant1!=act1)
$('#horas_2').fadeOut('fast',function(){
$(this).attr('src',lista_imagenes[hor2].src);
$(this).fadeIn('slow');
});
ant = $('#horas_3').attr('src');
act = "numeros/"+hor3+".png";
if(ant!=act)
$('#horas_3').fadeOut('fast',function(){
$(this).attr('src','numeros/'+hor3+'.png');
$(this).fadeIn('slow');
});
ant = $('#horas_1').attr('src');
act = "numeros/"+hor1+".png";
if(ant!=act)
$('#horas_1').fadeOut('fast',function(){
$(this).attr('src','numeros/'+hor1+'.png');
$(this).fadeIn('slow');
});
ant = $('#minutos_2').attr('src');
act = "numeros/"+min2+".png";
if(ant!=act)
$('#minutos_2').fadeOut('fast',function(){
$(this).attr('src','numeros/'+min2+'.png');
$(this).fadeIn('slow');
});
ant = $('#minutos_1').attr('src');
act = "numeros/"+min1+".png";
if(ant!=act)
$('#minutos_1').fadeOut('fast',function(){
$(this).attr('src','numeros/'+min1+'.png');
$(this).fadeIn('slow');
});
setTimeout("getFecha()",1000);
}
$(document).ready(function(){
getFecha();
});
</script>
</head>
<body>
<div id="countdown">
<img id="horas_3" src="numeros/0.png"><img id="horas_2" src="numeros/0.png"><img id="horas_1" src="numeros/0.png"><img src="numeros/hora.png"><img id="minutos_2" src="numeros/0.png"><img id="minutos_1" src="numeros/0.png"><img src="numeros/minutos.png"><img id="segundos_2" src="numeros/0.png"><img id="segundos_1" src="numeros/0.png"> <img src="numeros/seg.png">
</div>
</body>
</html>