Calificación:
  • 0 voto(s) - 0 Media
  • 1
  • 2
  • 3
  • 4
  • 5
Javascript - Almanaque
#1
Este es un ejemplo de hacer un almanaque usando javascript y un poco de css.

[Imagen: aOljJIf.jpg]

Este almanaque mostrara el mes con los dias de cada mes.
Se dara uso de una function en conjunto de un switch y un for por cada caso.
el cual segun el caso mostrara un mes, y dentro se ejecutara la funcion segun el valor igresado,
este valor sera el que toma en los for asi segun el valor de la funcion mostrara el mes
con sus respectivos dias.

Código:
<ul class="almanaque">
            <script type="text/javascript">
            var meses = ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"];
            var diasMeses = ["28", "30", "31"];
            function almanaque(m)
            {
                switch(m)
                {
              
                    case 1:
                        for(i=1;i<=diasMeses[2];i++)
                        {
                         if(i==1){document.write("<h1>"+meses[0]+"</h1>"+"<hr/>");}
                          document.write("<li>"+i+"</li>");
                          if(i==7 || i==14 || i==21 || i==28){document.write("<br/>");}
                        
                        }
                    
                    break;
                    case 2:
                        for(i=1;i<=diasMeses[0];i++)
                        {
                         if(i==1){document.write("<h1>"+meses[1]+"</h1>"+"<hr/>");}
                          document.write("<li>"+i+"</li>");
                          if(i==7 || i==14 || i==21 || i==28){document.write("<br/>");}
                        
                        }
                    
                    break;
                    case 3:
                        for(i=1;i<=diasMeses[2];i++)
                        {
                         if(i==1){document.write("<h1>"+meses[2]+"</h1>"+"<hr/>");}
                          document.write("<li>"+i+"</li>");
                          if(i==7 || i==14 || i==21 || i==28){document.write("<br/>");}
                        
                        }
                    
                    break;
                    case 4:
                        for(i=1;i<=diasMeses[1];i++)
                        {
                         if(i==1){document.write("<h1>"+meses[3]+"</h1>"+"<hr/>");}
                          document.write("<li>"+i+"</li>");
                          if(i==7 || i==14 || i==21 || i==28){document.write("<br/>");}
                        
                        }
                    
                    break;
                    case 5:
                        for(i=1;i<=diasMeses[2];i++)
                        {
                         if(i==1){document.write("<h1>"+meses[4]+"</h1>"+"<hr/>");}
                          document.write("<li>"+i+"</li>");
                          if(i==7 || i==14 || i==21 || i==28){document.write("<br/>");}
                        
                        }
                    
                    break;
                    case 6:
                        for(i=1;i<=diasMeses[1];i++)
                        {
                         if(i==1){document.write("<h1>"+meses[5]+"</h1>"+"<hr/>");}
                          document.write("<li>"+i+"</li>");
                          if(i==7 || i==14 || i==21 || i==28){document.write("<br/>");}
                        
                        }
                    
                    break;
                    case 7:
                        for(i=1;i<=diasMeses[2];i++)
                        {
                         if(i==1){document.write("<h1>"+meses[6]+"</h1>"+"<hr/>");}
                          document.write("<li>"+i+"</li>");
                          if(i==7 || i==14 || i==21 || i==28){document.write("<br/>");}
                        
                        }
                    
                    break;
                    case 8:
                        for(i=1;i<=diasMeses[2];i++)
                        {
                         if(i==1){document.write("<h1>"+meses[7]+"</h1>"+"<hr/>");}
                          document.write("<li>"+i+"</li>");
                          if(i==7 || i==14 || i==21 || i==28){document.write("<br/>");}
                        
                        }
                    
                    break;
                    case 9:
                        for(i=1;i<=diasMeses[1];i++)
                        {
                         if(i==1){document.write("<h1>"+meses[8]+"</h1>"+"<hr/>");}
                          document.write("<li>"+i+"</li>");
                          if(i==7 || i==14 || i==21 || i==28){document.write("<br/>");}
                        
                        }
                    
                    break;
                    case 10:
                        for(i=1;i<=diasMeses[2];i++)
                        {
                         if(i==1){document.write("<h1>"+meses[9]+"</h1>"+"<hr/>");}
                          document.write("<li>"+i+"</li>");
                          if(i==7 || i==14 || i==21 || i==28){document.write("<br/>");}
                        
                        }
                    
                    break;
                    case 11:
                        for(i=1;i<=diasMeses[1];i++)
                        {
                         if(i==1){document.write("<h1>"+meses[10]+"</h1>"+"<hr/>");}
                          document.write("<li>"+i+"</li>");
                          if(i==7 || i==14 || i==21 || i==28){document.write("<br/>");}
                        
                        }
                    
                    break;
                    case 12:
                        for(i=1;i<=diasMeses[2];i++)
                        {
                         if(i==1){document.write("<h1>"+meses[11]+"</h1>"+"<hr/>");}
                          document.write("<li>"+i+"</li>");
                          if(i==7 || i==14 || i==21 || i==28){document.write("<br/>");}
                        
                        }
                    
                    break;
                    default :
                     document.write("<h1>Dato Incorrecto.</h1>");
                    break;

                }

            }
          
            /*  AQUÍ CAMBIAMOS EL NÚMERO DEL MES QUE QUEREMOS MOSTRAR */
          
            almanaque(11);
            </script>
            </ul>

Usamos el siguiente estilo css

Código:
<style type="text/css">
     ul.almanaque
     {
      background:#0CF;
      width:580px;
      height:auto;
      padding:20px 5px 20px 20px ;
      border-radius:10px;
      -moz-border-radius:10px;
      -webkit-border-radius:10px;
      border:5px solid #999;
      box-shadow:0px 0px 5px #000;
      overflow: hidden;
     }
     ul.almanaque li
     {
      display:inline-block;
      width:50px;
      height:50px;
      padding:20px 10px 0px 10px;
      text-align:center;
      margin:5px;
      color:#FFF;
      background:orange;
      float:left;
      cursor:pointer;
      border-radius:5px;
      -moz-border-radius:5px;
      -webkit-border-radius:5px;
     }
     ul.almanaque li:hover
     {
       background:yellow;
       color:#F00;
       box-shadow:0px 0px 5px #000;
       transition:all 0.5s linear;
       -webkit-transition:all 0.5s linear;
       -moz-transition:all 0.5s linear;
       -o-transition:all 0.5s linear;
     }
     ul.almanaque li:active
     {
      box-shadow: inset 0px 0px 10px orange;
      -moz-box-shadow: inset 0px 0px 10px orange;
      -webkit-box-shadow: inset 0px 0px 10px orange;
     }
     h1
     {
     color:#FFF;
     }
     hr
     {
     background:#FFF!Important;
     border:1px solid #FFF;
     }
    </style>

Fuente: Serverlat
#2
Yo le diría calendario pero esta bien, yo lo utilizaría en sitios así muy sociales que cuenten con un script personalizado
Cualquier duda, pregunta, comentario... Aquí estoy Guiño
#3
Despues cuando este en el ordenador lo probare aunque me has dado una idea

Me dejo bastante que desear aquí la demo que hice le cambie los colores http://fiddle.jshell.net/Vicen/qUh6t/show/
WWW


Posibles temas similares...
Tema Autor Respuestas Vistas Último mensaje
  [Tutorial] Métodos para redireccionar URLs (HTML, PHP y Javascript wiston3 1 169 01-12-2016, 11:12 PM
Último mensaje: zeuz
  Linux Foundation respalda JavaScript Kiichi 3 194 03-11-2016, 03:43 AM
Último mensaje: habacuc78
  [Aporte] Curso básico de Javascript habacuc78 22 895 05-07-2016, 03:53 PM
Último mensaje: escuelasegura
  Trucos y efectos de Javascript para tu página web CarlosAlberto 0 415 05-01-2016, 03:51 PM
Último mensaje: CarlosAlberto
Sonrisa [Tutorial] Cómo utilizar Javascript para actualizar un Título R0bert0 0 343 05-12-2015, 10:07 PM
Último mensaje: R0bert0
Bombilla [Tutorial] Cómo utilizar Javascript para reproducir un archivo R0bert0 0 276 05-12-2015, 10:02 PM
Último mensaje: R0bert0
  [Tutorial] Calculadora sencilla en JavaScript luis.ml 3 427 21-09-2015, 12:03 PM
Último mensaje: riblier
  Ayuda con Contador en JavaScript alemagno 2 274 25-06-2015, 06:29 PM
Último mensaje: alemagno
  Caracteres especiales en javascript MikaCookies 4 517 09-03-2015, 01:41 AM
Último mensaje: MikaCookies
  Trucos Javascript canpios 4 398 30-01-2015, 06:17 AM
Último mensaje: garcon



Usuarios navegando en este tema: 1 invitado(s)