如何用HTML5制作數(shù)字時鐘

本篇內(nèi)容主要講解“如何用HTML5制作數(shù)字時鐘”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“如何用HTML5制作數(shù)字時鐘”吧!

復(fù)制代碼

XML/HTML Code復(fù)制內(nèi)容到剪貼板

var numData = [   

            "1111/1001/1001/1001/1001/1001/1111", //0   

            "0001/0001/0001/0001/0001/0001/0001", //1   

            "1111/0001/0001/1111/1000/1000/1111", //2   

            "1111/0001/0001/1111/0001/0001/1111", //3   

            "1010/1010/1010/1111/0010/0010/0010", //4   

            "1111/1000/1000/1111/0001/0001/1111", //5   

            "1111/1000/1000/1111/1001/1001/1111", //6   

            "1111/0001/0001/0001/0001/0001/0001", //7   

            "1111/1001/1001/1111/1001/1001/1111", //8   

            "1111/1001/1001/1111/0001/0001/1111", //9   

            "0000/0000/0010/0000/0010/0000/0000", //:   

        ]  

　　0代表沒像素，1代表有像素，/是為了更好看些，就是分行嘛，簡單說起來：比如0就是：

XML/HTML Code復(fù)制內(nèi)容到剪貼板

        1  1  1  1   

　　1  0  0  1   

　　1  0  0  1   

　　1  0  0  1   

　　1  0  0  1   

　　1  0  0  1   

　　1  1  1  1　　   

這樣就很清楚了吧。從0到9還有一個：號都用字符串表示好。

　　然后就寫個粒子對象，也就是像素點：

XML/HTML Code復(fù)制內(nèi)容到剪貼板

var P_radius = 8,Gravity = 9.8;   

        var Particle = function(){   

            this.x = 0;   

            this.y = 0;   

            this.vx = 0;   

            this.vy = 0;   

            this.color = "";   

            this.visible = false;   

            this.drop = false;   

        }   

        Particle.prototype = {   

            constructors:Particle,   

            paint:function(){        //繪制自身   

                ctx.fillStyle = this.color;   

                ctx.beginPath();   

                ctx.arc(this.x,this.y,P_radius,0,2*Math.PI);   

                ctx.fill();   

            },   

            reset:function(x,y,color){        //重置   

                this.x = x;   

                this.y = y;   

                this.vx = 0;   

                this.vy = 0;   

                this.color = color;   

                this.visible = true;   

                this.drop = false;   

            },   

            isDrop:function(){        //落下   

                this.drop = true;   

                var vx = Math.random()*20+15   

                this.vx = Math.random()>=0.5?-vx : vx;   

            },   

            update:function(time){        //每一幀的動作   

                if(this.drop){   

                    this.x += this.vx*time;   

                    this.y += this.vy*time;   

                    var vy = this.vy+Gravity*time;   

                    if(this.y>=canvas.height-P_radius){   

                        this.y = canvas.height-P_radius   

                        vy = -vy*0.7;   

                    }   

                    this.vy = vy;   

                    if(this.x<-P_radius||this.x>canvas.width+P_radius||this.y<-P_radius||this.y>canvas.height+P_radius){   

                        this.visible = false;   

                    }   

                }   

            }   

        }　　   

粒子對象的屬性比較簡單，就位置，速度，以及是否可視化。方法的話，paint是繪制方法，reset是重置（因為粒子要循環(huán)利用的，提升性能），isDrop是粒子落下方法，update就是每一幀更新粒子的動作，update中當(dāng)粒子運(yùn)動超出canvas的繪制區(qū)域時，就把它的可視化置為false，在粒子容器中保存起來等待下一次調(diào)用。

　　寫好粒子對象后，就要考慮如何讓粒子按照位置畫上去，同時當(dāng)粒子不需要用時能夠讓他做自由落體的動畫了。

　　先畫背景（也就是那沒有像素的白點）：

XML/HTML Code復(fù)制內(nèi)容到剪貼板

function drawBg(){   

            var tx = (canvas.width-((P_radius*2+X_J)*4*8+7*xjg))/2;   

            for(var i=0;i<8;i++){   

                var ty = (canvas.height-((P_radius+yjg)*6))/2;   

                for(var j=0;j<numData[0].length;j++){   

                    var tt = numData[0].charAt(j);   

                    if(tt==="/"){   

                        ty+=yjg;   

                    }else {   

                        var x = tx+j%5*(P_radius*2+X_J),   

                            y = ty;   

                        bgctx.fillStyle = "#FFF";   

                        bgctx.beginPath();   

                        bgctx.arc(x,y,P_radius,0,2*Math.PI);   

                        bgctx.fill();   

                    }   

                }   

                tx+=xjg+4*(P_radius*2+X_J);   

            }   

        }   

　　先把背景畫到一個離屏canvas中緩存起來，接下來每一幀重畫的時候就不需要邏輯計算了，直接把那個離屏canvas畫上去就行了。上面的邏輯應(yīng)該不難理解，就是通過兩個循環(huán)，循環(huán)8個數(shù)字，然后再對每個數(shù)字一個點一個點進(jìn)行繪制，當(dāng)遇到“/”時，就說明要換行了，把繪制的ty加個換行間隔，再把tx重置，再進(jìn)行繪制。就這樣，點就可以都畫出來了。效果圖如下：

2015511172757389.png (1282&times;350)

背景畫好了，就開始根據(jù)每一秒的時間，畫數(shù)字像素吧。方法主要是這個：

XML/HTML Code復(fù)制內(nèi)容到剪貼板

function setTime(time){   

            var h = time.getHours()+"",   

                m = time.getMinutes()+"",   

                s = time.getSeconds()+"";   

            hh = h.length===1?"0"+h:h;   

            mm = m.length===1?"0"+m:m;   

            ss = s.length===1?"0"+s:s;   

            var nowdate = h+":"+m+":"+s;   

            var tx = (canvas.width-((P_radius*2+X_J)*4*8+7*xjg))/2,color = "";   

            for(var i=0;i<nowdate.length;i++){   

                var n = nowdate.charAt(i)===":"?10:parseInt(nowdate.charAt(i)),   

                    text = numData[n];   

                var ty = (canvas.height-((P_radius+yjg)*6))/2;   

                switch(i){   

                    case 0:color = "#4DCB74";break;   

                    case 2:color = "#4062E0";break;   

                    case 3:color = "#D65050";break;   

                    case 5:color = "#4062E0";break;   

                    case 6:color = "#797C17";break;   

                }   

                for(var j=0;j<text.length;j++){   

                    var tt = text.charAt(j);   

                    if(tt==="/"){   

                        ty+=yjg;   

                    }else{   

                        var x = tx+j%5*(P_radius*2+X_J),   

                            y = ty,   

                            pp = null,   

                            usefullp = null;   

                        particles.forEach(function(p){   

                            if(p.visible&p.x===x&p.y===y){   

                                ppp = p;   

                            }else if(!p.visible&usefullp===null){   

                                usefullp = p;   

                            }   

                        });   

                        if(pp!==null&tt==="0"){   

                            pp.isDrop();   

                        }else if(pp===null&tt==="1"){   

                            usefullp.reset(x , y , color);   

                        }   

                    }   

                }   

                tx+=xjg+4*(P_radius*2+X_J);   

            }   

        }  

　　原理也不難，也是跟上面畫背景差不多，遍歷所有點，然后根據(jù)當(dāng)前時間的數(shù)字轉(zhuǎn)換成的字符串來判斷，當(dāng)前點是否應(yīng)該有像素，如果有像素就再判斷當(dāng)前這個點是否已經(jīng)有粒子對象在了，如果已經(jīng)有粒子對象在了，就直接跳出不處理，如果沒有粒子對象在，就再粒子容器中找一個沒有被使用的粒子reset到這個位置。還有一種情況，就是當(dāng)前這個點是不應(yīng)該有像素的，但是卻有粒子，那就獲取這個粒子，讓這個粒子進(jìn)行自由落體。

　　時間設(shè)置也寫好了，就可以寫舞臺更新的代碼了：

XML/HTML Code復(fù)制內(nèi)容到剪貼板

var timeCount_0 = 0,timeCount_1 = 0,particles = [];   

        function initAnimate(){   

            for(var i=0;i<200;i++){   

                var p = new Particle();   

                particles.push(p);   

            }   

            timeCount_0 = new Date();   

            timeCount_1 = new Date();   

            drawBg();   

            setTime(timeCount_0)   

            animate();   

        }   

        function animate(){   

            ctx.clearRect(0,0,canvas.width,canvas.height);   

            ctx.drawImage(bgcanvas,0,0);   

            var timeCount_2 = new Date();   

            if(timeCount_1-timeCount_0>=1000){   

                setTime(timeCount_1);   

                timeCount_0 = timeCount_1;   

            }   

            particles.forEach(function(p){   

                if(p.visible){   

                    p.update((timeCount_2-timeCount_1)/70);   

                    p.paint();   

                }   

            });   

            timeCount_1 = timeCount_2;   

            RAF(animate)   

        }  

　　在initAnimate進(jìn)行動畫初始化，初始化也就是先實例化兩百個粒子對象放到粒子容器中保存起來，再更新時間戳，緩存背景，設(shè)置當(dāng)前時間，然后調(diào)用animate動畫循環(huán)主體開始動畫。

　　animate中的邏輯也很簡單了，獲取時間戳，如果兩個時間戳之間的時間差大于或等于1秒，就進(jìn)行setTime。而再下面的就是對粒子容器里的所有可視化的粒子進(jìn)行遍歷循環(huán)重繪了。

到此，相信大家對“如何用HTML5制作數(shù)字時鐘”有了更深的了解，不妨來實際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！