<div id="clock">

    <span></span>：<span></span>：<span></span>

</div>

　　　　*{

            margin:;

            padding:;

            border:;

        }

        #clock{

            width: 300px;

            line-height: 60px;

            text-align: center;

            background: deepskyblue;

            margin: 0 auto;

        }

        span{

            width: 80px;

            line-height:;/*设置数字，此数字会与当前的字体尺寸相乘来设置行间距。相当于倍数*/

            background: lightblue;

            border: 2px solid green;

            padding: 0 10px;

        }

        window.onload=function(){

            var clock = document.getElementById("clock");

            var current = document.getElementsByTagName("span");

            setInterval(getTimes,1000);

            getTimes();

            function getTimes(){

                var now = new Date();

                var count = [now.getHours(),now.getMinutes(),now.getSeconds()];

                for(var i in count){

                    current[i].innerHTML = format(count[i]);

                }

                function format(num){

                    return num.toString().replace(/^(\d)$/,"0$1");

                }

            }

        }