Mostrar la fecha y la hora mediante Javascript

Bueno, vamos con el primer post relacionado con la programación. Concretamente en Javascript.
Este script sirve para mostrar la fecha y la hora en nuestro proyecto web. He de decir que es una adaptación o modificación de uno que encontré no recuerdo dónde, por lo que no puedo citar la fuente.


En la versión original, la fecha y la hora se mostraban en campos "input" de dos formularios, uno para la fecha y otro para la hora. Pero por más que me partí el coco con el CSS del proyecto, no sonseguía ajustar automáticamente el ancho de los inputs a su contenido y los datos quedaban o muy juntos o muy separados, en función de largo de su contenido (no es lo mismo mostrar "lunes" que "Miércoles" o "Enero" que "Septiembre")... supongo que por novato que soy.
El caso es que modifiqué el script y sustituí los inputs por simples divs, en los que se muestran los datos gracias a la función "innerHTML" y los cuales puedo modificar mediante CSS con bastante facilidad.

Una vez copiado el script en nuestro documento js.js (suponiendo que lo llaméis así, claro), sólo queda llamar a la función desde el body para utilizarla y crear los divs en los cuales se mostrarán los datos. El html podría ser así;

<div class="divreloj">
                <div id="fecha" class="fecha">
                    <div id="dia"></div>
                    <div id="numdia"></div>
                    <div id="mes"></div>
                    <div id="anno"></div>
                </div>
                <div id="reloj" class="reloj">
                    <div id="horas"></div>
                    <div id="minutos"></div>
                </div>
            </div>

Os dejo el CSS de mi proyecto, pero esto lo tenéis que ajustar a vuestras necesidades;

.divreloj {
    position: absolute;
    top: 10px;
    left: 645px;
    width: 300px;
    height: 80px;
    font-weight: 100;
    text-align: right;
}

#fecha {
    position: absolute;
    width: auto;
    right: 0;
}

#reloj {
    position: absolute;
    top: 20px;
    width: auto;
    right: 0;
}

#dia, #mes, #anno, #numdia, #horas, #minutos {
    float: left;
}

El script está comentado, así que no voy a añadir nada más.

function mostrarfecha(){
    //obtenemos la fecha actual
    var ahora = new Date();
    //obtenemos la hora actual
    var hrs = ahora.getHours();
    //obtenemos los minutos actuales
    //nótese lo siguiente; evalúo una condición previa para añadir un "0" delante del minuto si este es menor que "9".
    //El caso es que los minutos son mostrados por defecto sin cero delante y encontrarnos con "21:3" de la noche... no mola
    var mnts = (ahora.getMinutes()<9) ? '0'+ahora.getMinutes() : ahora.getMinutes();
    //Creamos el contenido HTML de los divs "horas" y "minutos"
    //Primero selecciono los divs
    var horas = document.getElementById('horas');
    var minutos = document.getElementById('minutos');
    //y después modifico su contenido
    //nótese que aquí añado los espacios y/o separadores correspondientes para que visualmente se muestre la información correctamente
    horas.innerHTML = hrs+':';
    minutos.innerHTML = mnts;
    
    //ahora vamos con las fechas
    //recuperamos el día de la semana en que estamos
    var diasemana = ahora.getDay();
    //recuperamos el mes del año en el que estamos
    var mesanno = ahora.getMonth();
    //recuperamos el número, dentro del mes, del día en el que estamos
    var numerodia = ahora.getDate();
    //recuoeramos el año en el que estamos
    //al año que nos devuelve la función "getYear" hay que sumar 1900 años más... ahora no recuerdo porqué (investiga leñe!)
    var year = ahora.getYear()+1900;
    
    
    //ahora seleccionamos los divs a modificar
    var dia = document.getElementById('dia');
    var mes = document.getElementById('mes');
    var numdia = document.getElementById('numdia');
    var anno = document.getElementById('anno');
    //y los modificamos
    //nótese que aquí añado los espacios y/o separadores correspondientes para que visualmente se muestre la información correctamente
    numdia.innerHTML = numerodia+' de ';
    anno.innerHTML = year;
    
    //traducimos los "numeros" devueltos por las funciones a los nombres de días o meses correspondientes
    //nótese que aquí añado los espacios y/o separadores correspondientes para que visualmente se muestre la información correctamente
    switch(diasemana){
        case 1:
            dia.innerHTML = 'Lunes, ';
            break;
        case 2:
            dia.innerHTML = 'Martes, ';
            break;
        case 3:
            dia.innerHTML = 'Miércoles, ';
            break;
        case 4:
            dia.innerHTML = 'Jueves, ';
            break;
        case 5:
            dia.innerHTML = 'Viernes, ';
            break;
        case 6:
            dia.innerHTML = 'Sábado, ';
            break;
        case 7:
            dia.innerHTML = 'Domingo, ';
            break;
    }

    switch(mesanno){
        case 0:
            mes.innerHTML = 'Enero de '
            break;
        case 1:
            mes.innerHTML = 'Febrero de '
            break;
        case 2:
            mes.innerHTML = 'Marzo de '
            break;
        case 3:
            mes.innerHTML = 'Abril de '
            break;
        case 4:
            mes.innerHTML = 'Mayo de '
            break;
        case 5:
            mes.innerHTML = 'Junio de '
            break;
        case 6:
            mes.innerHTML = 'Julio de '
            break;
        case 7:
            mes.innerHTML = 'Agosto de '
            break;
        case 8:
            mes.innerHTML = 'Septiembre de '
            break;
        case 9:
            mes.innerHTML = 'Octubre de '
            break;
        case 10:
            mes.innerHTML = 'Noviembre de '
            break;
        case 11:
            mes.innerHTML = 'Diciembre de '
            break;
    }
}