基础

样式

<div id="showDate" class="box">
    <p>1970-1-1 8:00 星期鬼</p>
    <span>1</span>
</div>

结构

* {
    margin: 0;
    padding: 0;
}
.box {
     500px;
    padding: 10px;
    margin: 100px auto;
    text-align: center;
    font: 400 18px/20px  "SimSun","5b8b4f53";
    font-weight:bold;">#DBE1E7;
}
.box p {
    font-weight:bold;">#666666;
}
.box span{
    display: block;
     40px;
    height: 40px;
    line-height: 40px;
    margin: 10px auto;
    font-weight:bold;">#C81623;
}

行为

window.onload = function () {

    function funXingQi(oDate) {
        switch (oDate.getDay()) {
            case 0: return "星期日";
            case 1: return "星期一";
            case 2: return "星期二";
            case 3: return "星期三";
            case 4: return "星期四";
            case 5: return "星期五";
            case 6: return "星期六";
        }
    }

    var oDate = new Date();
    /*年*/
    var nFullYear = oDate.getFullYear();
    /*月*/
    var nMonth = oDate.getMonth()+1;
    /*日*/
    var nDate = oDate.getDate();
    /*时*/
    var nHours = oDate.getHours();
    /*分*/
    var nMinutes = oDate.getMinutes();
    /*秒*/
    var nSeconds = oDate.getSeconds();
    /*刹那*/
    var nMilliseconds = oDate.getMilliseconds();
    /*时间戳*/
    var nTime = oDate.getTime();
    var nValueOf = oDate.valueOf();

    var oShowDate = document.getElementById("showDate");
    var oShowP = oShowDate.getElementsByTagName("p")[0];
    var oShowSpan = oShowDate.getElementsByTagName("span")[0];

   

oShowP.innerHTML = funXingQi(oDate)+nFullYear+"年"+nMonth+"月"+nDate+"日"+nHours+"时"+nMinutes+"分"+nSeconds+"秒"+nMilliseconds;
oShowSpan.innerHTML = nDate;

}