数码时钟

数码时钟

今天我们来学习如何制作数码时钟,我们先来看一下效果图。


数码时钟_第1张图片
数码时钟

接下来我们来分析一下代码。




    
        
        数码时钟
        
    

    
        
         :
        
         :
        
        

    


这里面的知识点为:
一、获取系统时间
1.Date对象
2.getHours()、getMinutes()、getSeconds()

var oDate = new Date();
var str = toDou(oDate.getHours()) + toDou(oDate.getMinutes()) + toDou(oDate.getSeconds());

二、显示系统时间
1.字符串连接
2.空位补零

    function toDou(n) {
                if(n < 10) {
                    return '0' + n;
                } else {
                    return '' + n;
                }
            }

三、设置图片路径
1.chatAt方法

for(var i = 0; i < aImg.length; i++) {
                        aImg[i].src = 'img/' + str.charAt(i) + '.png';
                    }

好了,今天的学习就到这里了。
愿你三冬暖,愿你春不寒;愿你天黑有灯,下雨有伞。


数码时钟_第2张图片
小晴天.jpg

你可能感兴趣的:(数码时钟)