精通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="images/0.png" /></li>
            <li><img src="images/1.png" /></li>
            <li><h1>:</h1></li>
            <li><img src="images/2.png" /></li>
            <li><img src="images/3.png" /></li>
            <li><h1>:</h1></li>
            <li><img src="images/4.png" /></li>
            <li><img src="images/5.png" /></li>
        </ul>
    </div>

你可能感兴趣的:(JavaScript)