利用js DOM操作对象写一个当前时间的数字时钟

在学javascript的过程中，DOM部分是必不可少的，下面就是我在学习dom的时候利用简单函数写的一个数字时钟定时器。

效果图是这样的（就不发动态视频嘛）：

就是在网页显示当前时间，效果略显丑陋，没有加太多的css样式，唯一好看的就是一个颜色渐变函数

代码并不复杂，先上图康康

 <script type="text/javascript">
        function panDuan(n){
            if(n<10){
                return '0'+n;
            }
            else{
                return ''+n;
            }
        }
        window.onload=function(){
            var sp1=document.getElementsByClassName("sp1");
            function time(){
                var presentTime=new Date();
                var numTimes=presentTime.getFullYear()+panDuan(presentTime.getMonth()+1)+panDuan(presentTime.getDate())
                            +panDuan(presentTime.getHours())+panDuan(presentTime.getMinutes())+panDuan(presentTime.getSeconds());
                for(var i=0;i<sp1.length;i++){
                    sp1[i].innerHTML=numTimes.charAt(i);
                }
            }
            setInterval(time,1000);
            


        }
    </script>

这是javascript部分

   <div id="clock">
        <div id="content">
            <span class="sp1">0</span>
            <span class="sp1">0</span>
            <span class="sp1">0</span>
            <span class="sp1">0</span><span class="sp2">年</span>
            <span class="sp1">0</span>
            <span class="sp1">0</span><span class="sp2">月</span>
            <span class="sp1">0</span>
            <span class="sp1">0</span><span class="sp2">日</span>
            <span class="sp1">0</span>
            <span class="sp1">0</span><span class="sp2">:</span>
            <span class="sp1">0</span>
            <span class="sp1">0</span><span class="sp2">:</span>
            <span class="sp1">0</span>
            <span class="sp1">0</span>
        </div>
    </div>

这是html部分，很简单的一堆span标签

在写javascript部分的时候，我们将判断函数放在全局作用域中方便使用，（但是我想不出来怎么把显示时候的0去掉，一开始用字符串拼接也不行，怪我比较菜）

然后就是调用date方法来获取当前时间了，然后再将所有的时间字符串拼接后一一赋值给每一个span标签的内容就完成了。

虽然感觉还有一点bug但不知道在哪里，等日后再发现吧。