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
  JavaScript en 14 minutos Posits 5 103 12-04-2018, 08:44 AM
Último mensaje: easy english
  [Tutorial] Métodos para redireccionar URLs (HTML, PHP y Javascript wiston3 1 293 01-12-2016, 11:12 PM
Último mensaje: zeuz
  Linux Foundation respalda JavaScript Kiichi 3 313 03-11-2016, 03:43 AM
Último mensaje: habacuc78
  [Aporte] Curso básico de Javascript habacuc78 22 1,179 05-07-2016, 03:53 PM
Último mensaje: escuelasegura
  Trucos y efectos de Javascript para tu página web CarlosAlberto 0 545 05-01-2016, 03:51 PM
Último mensaje: CarlosAlberto
Sonrisa [Tutorial] Cómo utilizar Javascript para actualizar un Título R0bert0 0 588 05-12-2015, 10:07 PM
Último mensaje: R0bert0
Bombilla [Tutorial] Cómo utilizar Javascript para reproducir un archivo R0bert0 0 408 05-12-2015, 10:02 PM
Último mensaje: R0bert0
  [Tutorial] Calculadora sencilla en JavaScript luis.ml 3 540 21-09-2015, 12:03 PM
Último mensaje: riblier
  Ayuda con Contador en JavaScript alemagno 2 393 25-06-2015, 06:29 PM
Último mensaje: alemagno
  Caracteres especiales en javascript MikaCookies 4 668 09-03-2015, 01:41 AM
Último mensaje: MikaCookies



Usuarios navegando en este tema: 1 invitado(s)