Edit in JSFiddle

function relojDigital(){
    var fecha = new Date(),
        hor = fecha.getHours(),
        min = fecha.getMinutes(),
        seg = fecha.getSeconds(),
        dia = fecha.getDay();
    var lista = document.getElementsByTagName('span'),
        reloj = document.getElementById('reloj');
    if(seg < 10){seg = '0'+seg;}
    if(min < 10){min = '0'+min;}
    if(hor > 12){
    	hor = hor - 12, hor = '0'+hor;
        document.getElementById('PM').className = 'active';
    }
    lista[dia].className = 'active';
    reloj.textContent = hor+':'+min+':'+seg;
}
relojDigital();
setInterval(relojDigital,1000);

<div id="MiReloj">
    <p id="Dias">
        <span>Dom</span>
        <span>Lun</span>
        <span>Mar</span>
        <span>Mie</span>
        <span>Jue</span>
        <span>Vie</span>
        <span>Sab</span>
    </p>
    <p id="AM">AM</p>
    <p id="reloj"></p>
    <p id="PM">PM</p>
</div>

* {
    font-family: 'Poiret One', cursive;
    margin:0;
    padding:0;
}
div#MiReloj {
    background: gray;
    overflow: hidden;
    color: rgba(224, 224, 224, 0.5);
    display:inline-block;
    text-shadow: 1px 1px 0px #656565;
    margin: 10px;
    padding: 5px;
    border-radius: 5px;
    box-shadow: inset 0px 0px 10px;
}
p#AM, p#reloj, p#PM {
    float: left;
    display: inline-block;
    padding: 5px 10px;
}
p#PM {
    float: right;
}
p#Dias span {
    display: inline-block;
    padding: 5px 10px;
}
p#AM, #PM {
    position: relative;
    bottom: -30px;
    width: 65px;
    text-align: center;
}
p#reloj {
    font-size: 40px;
    width: 100px;
    color: #e0e0e0;
}
.active {
    color: #e0e0e0;
    font-weight:700;
}