dar estilos a un javascript

**paxarin** · 24/01/2012, 17:17

Muy buenas.
Encontre un script para una cuenta atras, para una web. Pero tengo un problemilla con los estilos ya que el javascript todabia no es mi fuerte la verdad.
haber alguien del foro me puede hechar un cable.
Lo que necesito saber es como hacer para que cuando me pinte el contador los dias, horas, minutos y segundos me los devuelva en un tamaño y el texto dias, minutos, segundos y dias en otro más pequeño.
Espero haberme explicado bien.
este es el script:
var futuro = new Date (2012,5,25,20,16);
var actualiza = 1000;
function faltan(){
var ahora = new Date();
var faltan = futuro - ahora;
if (faltan > 0){
var segundos = Math.round(faltan/1000);
var minutos = Math.floor(segundos/60);
var segundos_s = segundos%60;
var horas = Math.floor(minutos/60);
var minutos_s = minutos%60;
var dias = Math.floor(horas/24);
var horas_s = horas%24;
document.formulario.reloj.value= dias + " Dias " + horas_s + " H " +
+minutos_s + " M " + segundos_s + " S" ;
setTimeout("faltan()",actualiza);
}
else {
document.formulario.reloj.value= "0 Dias | 0 Horas | 0 Minutos | 0 seg" ;
return true;
}
}
Un saludo y muchas gracias por adelantado.

**skaparate** · 24/01/2012, 20:51

Hola:

Lo que deberías hacer es envolver el texto con etiquetas span. Por ejemplo:

document.formulario.reloj.value= "" dias + " Dias " + horas_s + " H " + minutos_s + " M " + segundos_s + " S";

Luego defines los estilos:

<style type="text/css" rel="stylesheet" media="screen">
span.nums {
font-size: 18px;
}

span.txt {
font-size: 14px;
}
</style>

Eso debiera funcionar :P.

Saludos.

**paxarin** · 24/01/2012, 21:45

Iniciado por skaparate

Hola:

Lo que deberías hacer es envolver el texto con etiquetas span. Por ejemplo:

document.formulario.reloj.value= "" dias + " Dias " + horas_s + " H " + minutos_s + " M " + segundos_s + " S";

Luego defines los estilos:

<style type="text/css" rel="stylesheet" media="screen">
span.nums {
font-size: 18px;
}

span.txt {
font-size: 14px;
}
</style>

Eso debiera funcionar :P.

Saludos.

por algun motivo que desconozco me da un error, de todas formas seguire probando muchas gracias.

**paxarin** · 24/01/2012, 22:54

Muy buenas.
Con algo de ayuda y buscando por aqui y por alli llegue a componer este script que es para que haga una cuenta atras con dias, horas, minutos y segundos.
Pero quiero que los datos que me da el script (dias, horas, minutos y segundos) salgan en un tamaño más grande que el texto que devuelve.
Espero que alguien me pueda ayudar ya que yo en esto del javascript estoy pez, pez..
Aqui os dejo el script:
// JavaScript Temporizador
var futuro = new Date (2012,3,1,10,00);
var actualiza = 1000;
function faltan(){
var ahora = new Date();
var faltan = futuro - ahora;
if (faltan > 0){
var segundos = Math.round(faltan/1000);
var minutos = Math.floor(segundos/60);
var segundos_s = segundos%60;
var horas = Math.floor(minutos/60);
var minutos_s = minutos%60;
var dias = Math.floor(horas/24);
var horas_s = horas%24;
document.formulario.reloj.value= dias + " Dias " + horas_s + " H " +
+minutos_s + " M " + segundos_s + " S" ;
setTimeout("faltan()",actualiza);
}
else {
document.formulario.reloj.value= "0 Dias | 0 Horas | 0 Minutos | 0 seg" ;
return true;
}
}

**wolfmoon** · 24/01/2012, 23:54

Ya, pero eso no tiene nada que ver con tu script, eso depende de tu css, simplemente añadele a la capa que recoge esos datos los estilos que desees, asi de facil.

**skaparate** · 25/01/2012, 00:28

Dejalo todo el código anterior en una sola línea.

Por otro lado, ¿qué error es, que dice?

Saludos.

**rodojpm** · 25/01/2012, 04:12

Aqui te mando el code modificado... tienes que tener en cuenta el: <body onload="faltan()">y el div reloj,

Para modificar el tamaño puedes hacer en css con la clase pequeno

ejemplo:
span.pequeno{
font-size:10px;
}

Código:

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>Example clock</title>
		<link type="text/css" href="css/custom-theme/jquery-ui-1.8.17.custom.css" rel="stylesheet" />	
		<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
		<script type="text/javascript" src="js/jquery-ui-1.8.17.custom.min.js"></script>
		<script type="text/javascript">
			var futuro = new Date (2012,5,25,20,16);
			var actualiza = 1000;
			function faltan(){
			var ahora = new Date();
			var faltan = futuro - ahora;
			if (faltan > 0){
			var segundos = Math.round(faltan/1000);
			var minutos = Math.floor(segundos/60);
			var segundos_s = segundos%60;
			var horas = Math.floor(minutos/60);
			var minutos_s = minutos%60;
			var dias = Math.floor(horas/24);
			var horas_s = horas%24;
			document.getElementById("reloj").innerHTML= dias + "<span class=\"pequeno\"> Dias | </span>" + horas_s + "<span class=\"pequeno\"> Horas | </span>" + minutos_s + "<span class=\"pequeno\"> Minutos | </span>" + segundos_s + "<span class=\"pequeno\"> Seg</span>" ;
			setTimeout("faltan()",actualiza);
			}
			else {
			document.getElementById("reloj").innerHTML= "0 Dias | 0 Horas | 0 Minutos | 0 seg" ;
			return true;
			}
			}
		</script>
	<body onload="faltan()">
		<div id="reloj">Hello</div>
	</body>
</html>

**paxarin** · 25/01/2012, 09:26

Muchas gracias. habia visto en un tutorial la forma de indicarle los estilos pero no no sabia como ponerlo y dreamweaver como siempre dandome error.
Lo dicho muchas gracias.

**paxarin** · 25/01/2012, 09:27

Gracias por la respuesta. Un saludo.

**johnpeterjp** · 25/01/2012, 15:17

Amigo paxarin no publiques dos veces el tema. Está en las normas del foro. "Se borrarán temas Duplicados"

He combinado los dos en uno solo, en el futuro por favor evítelo. Saludos.