Javascript - Almanaque

Almanaque

Este es un ejemplo de hacer un almanaque usando javascript y un poco de css.

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.

<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

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

DEMO