html
    ---------------
    <div id="clock">
        <pan></span>Hours<span></span>Minutes<span></span>Seconds
    </div>

    css
    ---------------
    #clock{width:400px;text-align:center;background:#1a1a1a;margin:10px auto;padding:20px 0;color:#fff;}
    span{color:#000;width:80px;line-height:2;background:#fbfbfb;border:2px solid #b4b4b4;margin:0 10px;padding:0 10px;}

    js
    ---------------
    var oClock = document.getElementById("clock");
    var aSpan = oClock.getElementsByTagName("span");
    
    setInterval(getTimes,1000);
    //getTimes();
    function getTimes()
    {
        //JavaScript Date objects can only be instantiated by calling JavaScript Date as a constructor: calling it as a regular function (i.e. without the new operator) will return a string rather than a Date object
        var oDate = new Date();
        var aDate = [oDate.getHours(), oDate.getMinutes(), oDate.getSeconds()];
        
        for (var i in aDate)
        {
            aSpan[i].innerHTML=format(aDate[i])
        }
    }
    
    // 0$1 it is to show the numbers with two digits when it is still a single digit
    function format(a) 
    {
    return a.toString().replace(/^(\d)$/,'0$1');
    }