怎么用HTML5制作數(shù)字時鐘

這篇文章主要介紹“怎么用HTML5制作數(shù)字時鐘”，在日常操作中，相信很多人在怎么用HTML5制作數(shù)字時鐘問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”怎么用HTML5制作數(shù)字時鐘”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

10年積累的成都網(wǎng)站設計、成都網(wǎng)站制作經(jīng)驗，可以快速應對客戶對網(wǎng)站的新想法和需求。提供各種問題對應的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡服務。我雖然不認識你，你也不認識我。但先制作網(wǎng)站后付款的網(wǎng)站建設流程，更有英山免費網(wǎng)站建設讓你可以放心的選擇與我們合作。

就是這個數(shù)字時鐘，當時覺得這個創(chuàng)意不錯，但是也沒去折騰。直到昨天同事又在網(wǎng)上看到這個案例，他覺得很酷炫，就跑過來問我，這個是怎么實現(xiàn)的，然后我大概想了一下實現(xiàn)方法后也來了點興趣，就花了一點時間模仿做出來了一個。不同的是，岑安用的是div來做的。而我就是用canvas來實現(xiàn)的。用canvas來做性能方面會更好，因為就單單操控每個點的運動，用js控制dom的style屬性跟用js控制canvas繪圖相比性能方面肯定是有所欠缺的。

先上個我做的DEMO吧，然后再簡述一下做這個的方法：   看DEMO請戳我 。

做這個思路很簡單，就是通過字符串保存各個數(shù)字的位置：　

XML/HTML Code復制內容到剪貼板

1. var numData = [   

2.             "1111/1001/1001/1001/1001/1001/1111", //0   

3.             "0001/0001/0001/0001/0001/0001/0001", //1   

4.             "1111/0001/0001/1111/1000/1000/1111", //2   

5.             "1111/0001/0001/1111/0001/0001/1111", //3   

6.             "1010/1010/1010/1111/0010/0010/0010", //4   

7.             "1111/1000/1000/1111/0001/0001/1111", //5   

8.             "1111/1000/1000/1111/1001/1001/1111", //6   

9.             "1111/0001/0001/0001/0001/0001/0001", //7   

10.             "1111/1001/1001/1111/1001/1001/1111", //8   

11.             "1111/1001/1001/1111/0001/0001/1111", //9   

12.             "0000/0000/0010/0000/0010/0000/0000", //:   

13.         ]  

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

XML/HTML Code復制內容到剪貼板

1.         1  1  1  1   

2.   

3. 1  0  0  1   

4.   

5. 1  0  0  1   

6.   

7. 1  0  0  1   

8.   

9. 1  0  0  1   

10.   

11. 1  0  0  1   

12.   

13. 1  1  1  1　　   

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

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

XML/HTML Code復制內容到剪貼板

1. var P_radius = 8,Gravity = 9.8;   

2.         var Particle = function(){   

3.             this.x = 0;   

4.             this.y = 0;   

5.             this.vx = 0;   

6.             this.vy = 0;   

7.             this.color = "";   

8.             this.visible = false;   

9.             this.drop = false;   

10.         }   

11.         Particle.prototype = {   

12.             constructors:Particle,   

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

14.                 ctx.fillStyle = this.color;   

15.                 ctx.beginPath();   

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

17.                 ctx.fill();   

18.             },   

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

20.                 this.x = x;   

21.                 this.y = y;   

22.                 this.vx = 0;   

23.                 this.vy = 0;   

24.                 this.color = color;   

25.                 this.visible = true;   

26.                 this.drop = false;   

27.             },   

28.             isDrop:function(){        //落下   

29.                 this.drop = true;   

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

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

32.             },   

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

34.                 if(this.drop){   

35.                     this.x += this.vx*time;   

36.                     this.y += this.vy*time;   

37.   

38.                     var vy = this.vy+Gravity*time;   

39.   

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

41.                         this.y = canvas.height-P_radius   

42.                         vy = -vy*0.7;   

43.                     }   

44.   

45.                     this.vy = vy;   

46.   

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

48.                         this.visible = false;   

49.                     }   

50.                 }   

51.             }   

52.         }　　   

53.   

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

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

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

XML/HTML Code復制內容到剪貼板

1. function drawBg(){   

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

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

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

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

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

7.                     if(tt==="/"){   

8.                         ty+=yjg;   

9.                     }else {   

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

11.                             y = ty;   

12.                         bgctx.fillStyle = "#FFF";   

13.                         bgctx.beginPath();   

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

15.                         bgctx.fill();   

16.                     }   

17.                 }   

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

19.             }   

20.         }   

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

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

XML/HTML Code復制內容到剪貼板

1. function setTime(time){   

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

3.                 m = time.getMinutes()+"",   

4.                 s = time.getSeconds()+"";   

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

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

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

8.   

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

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

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

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

13.                     text = numData[n];   

14.   

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

16.   

17.                 switch(i){   

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

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

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

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

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

23.                 }   

24.   

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

26.                     var tt = text.charAt(j);   

27.                     if(tt==="/"){   

28.                         ty+=yjg;   

29.                     }else{   

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

31.                             y = ty,   

32.                             pp = null,   

33.                             usefullp = null;   

34.                         particles.forEach(function(p){   

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

36.                                 ppp = p;   

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

38.                                 usefullp = p;   

39.                             }   

40.                         });   

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

42.                             pp.isDrop();   

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

44.                             usefullp.reset(x , y , color);   

45.                         }   

46.                     }   

47.                 }   

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

49.             }   

50.         }  

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

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

XML/HTML Code復制內容到剪貼板

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

2.         function initAnimate(){   

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

4.                 var p = new Particle();   

5.                 particles.push(p);   

6.             }   

7.   

8.             timeCount_0 = new Date();   

9.             timeCount_1 = new Date();   

10.             drawBg();   

11.             setTime(timeCount_0)   

12.             animate();   

13.         }   

14.   

15.         function animate(){   

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

17.             ctx.drawImage(bgcanvas,0,0);   

18.   

19.             var timeCount_2 = new Date();   

20.   

21.             if(timeCount_1-timeCount_0>=1000){   

22.                 setTime(timeCount_1);   

23.                 timeCount_0 = timeCount_1;   

24.             }   

25.   

26.             particles.forEach(function(p){   

27.                 if(p.visible){   

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

29.                     p.paint();   

30.                 }   

31.             });   

32.   

33.             timeCount_1 = timeCount_2;   

34.   

35.             RAF(animate)   

36.         }  

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

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

個效果還是有很多可以優(yōu)化的地方的，因為時鐘和分鐘都是動的比較少的，所以可以把這兩個緩存起來，當沒有動作的時候就直接將緩存數(shù)據(jù)畫上去就行了，這樣就可以減少舞臺每一幀的繪圖API調用量，肯定是能提高性能的。不過現(xiàn)在畢竟粒子不多，兩三百個粒子對象也就夠用了，如果不去做優(yōu)化，動畫也還是能很流暢的運行的。所以樓主就偷個小懶啦。

源碼地址：https://github.com/whxaxes/canvas-test/blob/gh-pages/src/Funny-demo/coolClock/index.html

到此，關于“怎么用HTML5制作數(shù)字時鐘”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續(xù)學習更多相關知識，請繼續(xù)關注創(chuàng)新互聯(lián)網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>

文章名稱：怎么用HTML5制作數(shù)字時鐘
標題URL：http://muchs.cn/article18/ppjpdp.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供定制開發(fā)、App設計、移動網(wǎng)站建設、網(wǎng)站收錄、標簽優(yōu)化、

廣告

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)