Regresar a la página www.ComoCrearTuWeb.com
Resultados 1 al 10 de 10

Tema: dar estilos a un javascript

  1. #1
    Esto empieza a ser un vicio... Habitante Avatar de paxarin
    Fecha de Ingreso
    03 nov, 09
    Ubicación
    Santa cruz de Bezana
    Mensajes
    646
    Poder de Reputación
    19

    dar estilos a un javascript

    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.

  2. #2
    Esto empieza a ser un vicio... Habitante
    Fecha de Ingreso
    02 may, 11
    Ubicación
    Santiago, Chile
    Mensajes
    2,079
    Poder de Reputación
    24
    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.

  3. #3
    Esto empieza a ser un vicio... Habitante Avatar de paxarin
    Fecha de Ingreso
    03 nov, 09
    Ubicación
    Santa cruz de Bezana
    Mensajes
    646
    Poder de Reputación
    19
    Cita Iniciado por skaparate Ver Mensaje
    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.

  4. #4
    Esto empieza a ser un vicio... Habitante Avatar de paxarin
    Fecha de Ingreso
    03 nov, 09
    Ubicación
    Santa cruz de Bezana
    Mensajes
    646
    Poder de Reputación
    19

    usar estilos en un script AYUDA!!!

    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;
    }
    }

  5. #5
    Esto empieza a ser un vicio... Habitante
    Fecha de Ingreso
    08 dic, 08
    Mensajes
    744
    Poder de Reputación
    20
    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.

  6. #6
    Esto empieza a ser un vicio... Habitante
    Fecha de Ingreso
    02 may, 11
    Ubicación
    Santiago, Chile
    Mensajes
    2,079
    Poder de Reputación
    24
    Dejalo todo el código anterior en una sola línea.

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

    Saludos.

  7. #7
    Me va gustando esto... Habitante
    Fecha de Ingreso
    08 ago, 09
    Ubicación
    Stgo, RD
    Mensajes
    258
    Poder de Reputación
    17
    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>

  8. #8
    Esto empieza a ser un vicio... Habitante Avatar de paxarin
    Fecha de Ingreso
    03 nov, 09
    Ubicación
    Santa cruz de Bezana
    Mensajes
    646
    Poder de Reputación
    19
    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.

  9. #9
    Esto empieza a ser un vicio... Habitante Avatar de paxarin
    Fecha de Ingreso
    03 nov, 09
    Ubicación
    Santa cruz de Bezana
    Mensajes
    646
    Poder de Reputación
    19
    Gracias por la respuesta. Un saludo.

  10. #10
    Moderador CCTW Habitante Avatar de johnpeterjp
    Fecha de Ingreso
    13 abr, 06
    Ubicación
    Santiago de Chile
    Mensajes
    3,142
    Poder de Reputación
    36
    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.
    "Conocimiento es necesidad, necesidad es conocer lo que necesitamos"


Temas Similares

  1. [TUTORIAL] Javascript ::SurKaiser:: Aprende Javascript!
    Por SurKaiser en el foro JavaScript
    Respuestas: 4
    Último Mensaje: 18/11/2011, 17:18
  2. PHP o JavaScript??
    Por SuperHipo en el foro Foro General
    Respuestas: 4
    Último Mensaje: 22/09/2011, 07:38
  3. abreviatura en javascript
    Por yaka_1989 en el foro Foro General
    Respuestas: 1
    Último Mensaje: 13/11/2009, 02:06

Permisos de Publicación

  • No puedes crear nuevos temas
  • No puedes responder temas
  • No puedes subir archivos adjuntos
  • No puedes editar tus mensajes
  •