本篇內(nèi)容主要講解“如何用HTML5制作數(shù)字時(shí)鐘”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“如何用HTML5制作數(shù)字時(shí)鐘”吧!
成都創(chuàng)新互聯(lián)公司"三網(wǎng)合一"的企業(yè)建站思路。企業(yè)可建設(shè)擁有電腦版、微信版、手機(jī)版的企業(yè)網(wǎng)站。實(shí)現(xiàn)跨屏營(yíng)銷，產(chǎn)品發(fā)布一步更新，電腦網(wǎng)絡(luò)+移動(dòng)網(wǎng)絡(luò)一網(wǎng)打盡，滿足企業(yè)的營(yíng)銷需求！成都創(chuàng)新互聯(lián)公司具備承接各種類型的網(wǎng)站設(shè)計(jì)制作、成都做網(wǎng)站項(xiàng)目的能力。經(jīng)過(guò)10多年的努力的開(kāi)拓，為不同行業(yè)的企事業(yè)單位提供了優(yōu)質(zhì)的服務(wù)，并獲得了客戶的一致好評(píng)。
復(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代表沒(méi)像素，1代表有像素，/是為了更好看些，就是分行嘛，簡(jiǎn)單說(shuō)起來(lái)：比如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還有一個(gè)：號(hào)都用字符串表示好。
然后就寫(xiě)個(gè)粒子對(duì)象，也就是像素點(diǎn)：
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){ //每一幀的動(dòng)作
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;
}
}
}
}
粒子對(duì)象的屬性比較簡(jiǎn)單，就位置，速度，以及是否可視化。方法的話，paint是繪制方法，reset是重置（因?yàn)榱Ｗ右h(huán)利用的，提升性能），isDrop是粒子落下方法，update就是每一幀更新粒子的動(dòng)作，update中當(dāng)粒子運(yùn)動(dòng)超出canvas的繪制區(qū)域時(shí)，就把它的可視化置為false，在粒子容器中保存起來(lái)等待下一次調(diào)用。
寫(xiě)好粒子對(duì)象后，就要考慮如何讓粒子按照位置畫(huà)上去，同時(shí)當(dāng)粒子不需要用時(shí)能夠讓他做自由落體的動(dòng)畫(huà)了。
先畫(huà)背景（也就是那沒(méi)有像素的白點(diǎn)）：
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 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); } } 先把背景畫(huà)到一個(gè)離屏canvas中緩存起來(lái)，接下來(lái)每一幀重畫(huà)的時(shí)候就不需要邏輯計(jì)算了，直接把那個(gè)離屏canvas畫(huà)上去就行了。上面的邏輯應(yīng)該不難理解，就是通過(guò)兩個(gè)循環(huán)，循環(huán)8個(gè)數(shù)字，然后再對(duì)每個(gè)數(shù)字一個(gè)點(diǎn)一個(gè)點(diǎn)進(jìn)行繪制，當(dāng)遇到“/”時(shí)，就說(shuō)明要換行了，把繪制的ty加個(gè)換行間隔，再把tx重置，再進(jìn)行繪制。就這樣，點(diǎn)就可以都畫(huà)出來(lái)了。效果圖如下： 2015511172757389.png (1282×350) 背景畫(huà)好了，就開(kāi)始根據(jù)每一秒的時(shí)間，畫(huà)數(shù)字像素吧。方法主要是這個(gè)： 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 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 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); } } 原理也不難，也是跟上面畫(huà)背景差不多，遍歷所有點(diǎn)，然后根據(jù)當(dāng)前時(shí)間的數(shù)字轉(zhuǎn)換成的字符串來(lái)判斷，當(dāng)前點(diǎn)是否應(yīng)該有像素，如果有像素就再判斷當(dāng)前這個(gè)點(diǎn)是否已經(jīng)有粒子對(duì)象在了，如果已經(jīng)有粒子對(duì)象在了，就直接跳出不處理，如果沒(méi)有粒子對(duì)象在，就再粒子容器中找一個(gè)沒(méi)有被使用的粒子reset到這個(gè)位置。還有一種情況，就是當(dāng)前這個(gè)點(diǎn)是不應(yīng)該有像素的，但是卻有粒子，那就獲取這個(gè)粒子，讓這個(gè)粒子進(jìn)行自由落體。 時(shí)間設(shè)置也寫(xiě)好了，就可以寫(xiě)舞臺(tái)更新的代碼了： 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)行動(dòng)畫(huà)初始化，初始化也就是先實(shí)例化兩百個(gè)粒子對(duì)象放到粒子容器中保存起來(lái)，再更新時(shí)間戳，緩存背景，設(shè)置當(dāng)前時(shí)間，然后調(diào)用animate動(dòng)畫(huà)循環(huán)主體開(kāi)始動(dòng)畫(huà)。 animate中的邏輯也很簡(jiǎn)單了，獲取時(shí)間戳，如果兩個(gè)時(shí)間戳之間的時(shí)間差大于或等于1秒，就進(jìn)行setTime。而再下面的就是對(duì)粒子容器里的所有可視化的粒子進(jìn)行遍歷循環(huán)重繪了。 到此，相信大家對(duì)“如何用HTML5制作數(shù)字時(shí)鐘”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！
標(biāo)題名稱：如何用HTML5制作數(shù)字時(shí)鐘
鏈接分享：http://weahome.cn/article/pgjsos.html
重慶分公司
重慶分公司
