精通javascript笔记(智能社)——数字时钟

JS代码：

---

<script type="text/javascript">
    window.onload=function(){

　　　//小于10的数字补零及数字转字符串
        function toDouble(num){
            if(num>=0&&num<10){
                num='0'+num;
            }else{
                num=''+num;
            }
            return num;
        }

var oDiv1=document.getElementById("div1");
        var aImgs=oDiv1.getElementsByTagName('img');

function times(){
        var oDate=new Date();
        var nowtime=toDouble(oDate.getHours())+toDouble(oDate.getMinutes())+toDouble(oDate.getSeconds());
            for(var i=0; i<aImgs.length;i++){
                aImgs[i].src='images/'+nowtime.charAt(i)+'.png';  //charAt()用于取字符串nowtime的第i位元素
            }        
        }

setInterval(times,1000)
        times(); //加载时自动执行一次
    }
</script>

html代码：

---

注：需要自己建立0.png,1.png,2.png ...9.png共十张png图片，内容分别为0,1,2 ... 9。

<div id="div1">
        <ul>
            <li><img src="data:images/0.png" /></li>
            <li><img src="data:images/1.png" /></li>
            <li><h1>：</h1></li>
            <li><img src="data:images/2.png" /></li>
            <li><img src="data:images/3.png" /></li>
            <li><h1>：</h1></li>
            <li><img src="data:images/4.png" /></li>
            <li><img src="data:images/5.png" /></li>
        </ul>
    </div>