Entrar

dar estilos a un javascript

paxarin · · Solicitar retirada
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 · · Solicitar retirada
Hola:

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

document.formulario.reloj.value= "<span class='nums'>" dias + "</span> <span class='txt'>Dias</span> <span class='nums'>" + horas_s + "</span> <span class='txt'>H</span> <span class='nums'>" + minutos_s + "</span> <span class='txt'>M</span> <span class='nums'>" + segundos_s + "</span> <span class='txt'>S</span>";

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 · · Solicitar retirada
skaparate escribió:Hola:

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

document.formulario.reloj.value= "<span class='nums'>" dias + "</span> <span class='txt'>Dias</span> <span class='nums'>" + horas_s + "</span> <span class='txt'>H</span> <span class='nums'>" + minutos_s + "</span> <span class='txt'>M</span> <span class='nums'>" + segundos_s + "</span> <span class='txt'>S</span>";

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 · · Solicitar retirada
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 · · Solicitar retirada
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 · · Solicitar retirada
Dejalo todo el código anterior en una sola línea.

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

Saludos.
rodojpm · · Solicitar retirada
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;
}

<!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>
johnpeterjp · · Solicitar retirada
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.