為什么我的沒有效果呢 不知道哪里錯(cuò)了 求大神指導(dǎo)
HTML
<!DOCTYPE?html><html?lang="en"><head> ????<meta?charset="UTF-8"> ????<title>canvas倒計(jì)時(shí)效果</title></head><body?style="height:?100%"><canvas?id="canvas"?style="height:?100%"> ????當(dāng)前瀏覽器不支持Canvas，請(qǐng)更換瀏覽器后再試</canvas><script?src="digit.js"></script><script?src="canvas%20daojishi.js"></script></body></html>
/////////js代碼///////////
var?canvas_width=1024;
var?canvas_height=768;
var?radius=8;
var?margin_top=60;
var?margin_left=30;
//const修飾的數(shù)據(jù)類型是指常類型，常類型的變量或?qū)ο蟮闹凳遣荒鼙桓碌??//endtime?截至?xí)r間
//?const?endTime=new?Date(2016,10,7,0,0,0);?//new?date()?不能超過距離現(xiàn)在的99小時(shí)?因?yàn)樾r(shí)設(shè)定只有兩位數(shù)?只能99小時(shí)?4天?月份0——11
//自動(dòng)更新時(shí)間
var?endTime=new?Date();??//得到當(dāng)前的時(shí)間
endTime.setTime(endTime.getTime()+3600*1000);??//設(shè)置當(dāng)前時(shí)間（得到當(dāng)前時(shí)間（毫秒）+1h（3600）s*1000轉(zhuǎn)換為毫秒）
var?curShowTimeSeconds=0;?//當(dāng)前時(shí)間秒數(shù)為0
var?balls?=?[];??//小球數(shù)組
const?colors?=?["#33B5E5","#0099CC","#AA66CC","#9933CC","#99CC00","#669900","#FFBB33","#FF8800","#FF4444","#CC0000"];
window.onload=function?()?{
????var?canvas=document.getElementById("canvas");
????//?canvas.width=canvas_width;
????//?canvas.height=canvas_height;
????var?context=canvas.getContext("2d");
????//屏幕自適應(yīng)
????canvas_width=document.body.clientWidth;
????canvas_height=document.body.clientHeight;
????margin_left=Math.round(canvas_width/10);
????margin_top=Math.round(canvas_height/5);
????radius=Math.round((canvas_width*4/5)/108)-1;
????//render這個(gè)函數(shù)里面有個(gè)renderDigit()
????//依次繪制時(shí)分秒的每個(gè)數(shù)字，秒的個(gè)位數(shù)到區(qū)域左邊的距離是?93*(R+1)，
????//?并且本身一個(gè)數(shù)的寬度是15*(R+1)，
????//?所以得到了區(qū)域總寬為93*(R+1)+15*(R+1)=108*(R+1)，
????//?也就是window_width*4/5?=?108?*(R+1)；
????curShowTimeSeconds=getCurrentShowTimeSeconds();
????//?render(context);??//渲染?具體繪制??//替換為setInterval()
????//動(dòng)畫效果的實(shí)現(xiàn)
????setInterval(
????????function?()?{
????????????render(context);??//在畫布上描述?//下面已完成
????????????update();??//數(shù)據(jù)的變化
????????},50
????)
};
//得到當(dāng)前時(shí)間
function?getCurrentShowTimeSeconds()?{
????var?curTime=new?Date();?//取得當(dāng)前的時(shí)間
????var?retTime=endTime.getTime()-curTime.getTime();?//倒計(jì)時(shí)=結(jié)束時(shí)間-當(dāng)前時(shí)間???//getTime()??得到毫秒數(shù)
????retTime=Math.round(retTime/1000);??//round()?方法可把一個(gè)數(shù)字舍入為最接近的整數(shù)。//??ret/1000?把毫秒轉(zhuǎn)換為秒
????return?retTime>=0??retTime:0;??//判斷reTime是否>=0?如果是?則返回?ret?否則返回0
}
//數(shù)據(jù)變化
function?update()?{
????//1.時(shí)間變化
????var?nextShowTimeSeconds=getCurrentShowTimeSeconds();??//得到下一個(gè)時(shí)間
????//下一個(gè)時(shí)間分解??parseInt()解析一個(gè)字符串，并返回一個(gè)整數(shù)
????var?nextHours=parseInt(nextShowTimeSeconds/3600);
????var?nextMinutes=parseInt((nextShowTimeSeconds-nextHours*3600)/60);
????var?nextSeconds=nextShowTimeSeconds%60;
????//當(dāng)前時(shí)間分解
????var?curHours=parseInt(curShowTimeSeconds/3600);
????var?curMinutes=parseInt((curShowTimeSeconds-curHours*3600)/60);
????var?curSeconds=curShowTimeSeconds%60;
????//2.添加小球位置的變化
?????if?(nextSeconds?!=?curSeconds)?{?//判斷下一個(gè)時(shí)間是否等于當(dāng)前的時(shí)間//當(dāng)不等于的時(shí)候
????????????//時(shí)間變化時(shí)，添加小球
????????????//小時(shí)
????????????if?(parseInt(curHours?/?10)?!=?parseInt(nextHours?/?10))?{
????????????????addBalls(margin_left,?margin_top,?parseInt(curHours?/?10));?//位置?X?Y?以及?相應(yīng)的數(shù)字
????????????}
????????????if?(parseInt(curHours?%?10)?!=?parseInt(nextHours?%?10))?{
????????????????addBalls(margin_left?+?15?*?(radius?+?1),?margin_top,?parseInt(curHours?%?10))
????????????}
????????????//分鐘
????????????if?(parseInt(curMinutes?/?10)?!=?parseInt(nextMinutes?/?10))?{
????????????????addBalls(margin_left?+?39?*?(radius?+?1),?margin_top,?parseInt(curMinutes?/?10));
????????????}
????????????if?(parseInt(curMinutes?%?10)?!=?parseInt(nextMinutes?%?10))?{
????????????????addBalls(margin_left?+?54?*?(radius?+?1),?margin_top,?parseInt(curMinutes?%?10));
????????????}
????????????//秒鐘
????????????if?(parseInt(curSeconds?/?10)?!=?parseInt(nextSeconds?/?10))?{
????????????????addBalls(margin_left?+?78?*?(radius?+?1),?margin_top,?parseInt(curSeconds?/?10));
????????????}
????????????if?(parseInt(curSeconds?%?10)?!=?parseInt(nextSeconds?%?10))?{
????????????????addBalls(margin_left?+?93?*?(radius?+?1),?margin_top,?parseInt(curSeconds?%?10));
????????????}
????????????curShowTimeSeconds?=?nextShowTimeSeconds;??//當(dāng)前的時(shí)間就是==下一個(gè)時(shí)間
????????}
????????updateBalls();??//更新所有的小球
????????console.log(balls.length);??//在控制臺(tái)打印balls的長度??//不停加長??//解決性能優(yōu)化
????}
???????
????????
function?updateBalls()?{
????//1.（1）小球運(yùn)動(dòng)值的變化
????for?(var?i=0;i<balls.length;i++){
????????balls[i].x+=balls[i].vx;
????????balls[i].y+=balls[i].vy;
????????balls[i].vy+=balls[i].g;
????????//（2）.碰撞檢測(cè)
????????if?(balls[i].y>=canvas_height-radius)?{
???????????balls[i].y?=?canvas_height?-?radius;
???????????balls[i].vy?=?-balls[i].vy?*?0.7;??//0.75摩擦系數(shù)?越大越遠(yuǎn)
???????}
???????
????}
????//2.性能優(yōu)化?刪除小球
????var?cnt=0;??//小球數(shù)量
????for?(var?i=0;i<balls.length;i++)
????????//右邊緣>0?和?左邊緣<canvas.width?說明在畫布內(nèi)?然后放在數(shù)組里
????????if(balls[i].x+radius>0?&&?balls[i].x-radius<canvas_width)
????????????balls[cnt++]?=?balls[i];
????while?(balls.length>Math.min(200,cnt)){??//保留200到cnt之間的最小值
????????balls.pop();??//pop()用于刪除并返回?cái)?shù)組的最后一個(gè)元素
????}
}
function?addBalls(x,y,num)?{???//運(yùn)動(dòng)的彩色小球
????for?(var?i=0;i<digit[num].length;i++)??//記得沒有；
???????for?(var?j=0;j<digit[num][i].length;j++)??//記得沒有；
??????????if?(digit[num][i][j]==1){
??????????????//定義一個(gè)小球變化的數(shù)值
??????????????var?aBall={
??????????????????x:x+j*2*(radius+1)+(radius+1),
??????????????????y:y+i*2*(radius+1)+(radius+1),
??????????????????g:1.5+Math.random(),??//加速度?1.5-2.5?//?不同
??????????????????//pow()?方法可返回?x?的?y?次冪的值。在這里是?-1的N次冪??//?Math.ceil向上取整
??????????????????//?在X軸上的加速度?//Math.round()?四舍五入取整??//random()?0?~?1?之間?隨機(jī)數(shù)。
??????????????????//1-1000//取整?//取-1?或+1?//*4//-4至+4
??????????????????vx:?Math.pow(-1,?Math.ceil(Math.random()?*?1000))?*?4,
??????????????????vy:?-5,??//向上拋一點(diǎn)點(diǎn)
??????????????????//math.floor(x)對(duì)浮點(diǎn)數(shù)向下取整??//
??????????????????color:?colors[Math.floor(Math.random()?*?colors.length)]?//顏色數(shù)組
??????????????};
??????????????balls.push(aBall);??//把小球添加進(jìn)小球數(shù)組里
??????????}
}
//在畫布上描述
function?render(cxt)?{
????//clearRect()?方法清空給定矩形內(nèi)的指定像素??//畫布更新??//時(shí)間變化不重復(fù)
????cxt.clearRect(0,0,canvas_width,canvas_height);
????//當(dāng)前的時(shí)間
????var?hours=parseInt(curShowTimeSeconds/3600);
????var?minutes=parseInt((curShowTimeSeconds-hours*3600)/60);??//（現(xiàn)在秒-當(dāng)前秒?）/60??=分鐘
????var?seconds=curShowTimeSeconds%60;??//倒計(jì)時(shí)具體時(shí)間??//%60取余
????//定義時(shí)間的在畫布上的顯示位置
????renderDigit(margin_left,margin_top,parseInt(hours/10),cxt)?;??//小時(shí)?//十位數(shù)??//?第一位?//起始位置?x?y
????renderDigit(margin_left+15*(radius+1),margin_top,parseInt(hours%10),cxt);?//小時(shí)//個(gè)位數(shù)//第二位//
????
????renderDigit(margin_left+30*(radius+1),margin_top,10,cxt);??//冒號(hào)
????
????renderDigit(margin_left+39*(radius+1),margin_top,parseInt(minutes/10),cxt);?//分鐘//第三位
????renderDigit(margin_left+54*(radius+1),margin_top,parseInt(minutes%10),cxt);?//分鐘//第四位
????renderDigit(margin_left+69*(radius+1),margin_top,10,cxt);??//冒號(hào)
????renderDigit(margin_left+78*(radius+1),margin_top,parseInt(seconds/10),cxt);??//秒鐘//第五位
????renderDigit(margin_left+93*(radius+1),margin_top,parseInt(seconds%10),cxt);??//秒鐘//第六位
????//繪制小球
????for?(var?i=0;i<balls.length;i++){
????????cxt.fillStyle=balls[i].color;
????????cxt.beginPath();
????????cxt.arc(balls[i].x,balls[i].y,radius,0,2*Math.PI,true);
????????cxt.closePath();
????????cxt.fill();
????}
}
//具體的循環(huán)//規(guī)定何處填充顏色
function?renderDigit(x,y,num,cxt)?{??//傳入4個(gè)參數(shù)??X?Y?num?cxt
????cxt.fillStyle="#00ff00";??//定義好顏色
????for?(var?i=0;i<digit[num].length;i++)???//不能有；
?????????for?(var?j=0;j<digit[num][i].length;j++)?????//不能有；
????if?(digit[num][i][j]==1){?????//畫圓
????????cxt.beginPath();
????????cxt.arc(x+j*2*(radius+1)+(radius+1),y+i*2*(radius+1),radius,0,2*Math.PI);
????????cxt.closePath();
????????cxt.fill();
????}
}
2016-11-08
你把11改成10就OK啦
2016-11-08
這個(gè)demo只能是四天之內(nèi)的倒計(jì)時(shí)（小時(shí)為兩位數(shù)，因?yàn)閐igit為三維數(shù)組），new Date()時(shí)，月份是從0開始的，即1代表2月。你看看是不是這個(gè)問題，我就是這個(gè)問題，然后就解決啦
2016-11-04
編程不好，放棄了。。。我找了一上午才找到的問題，找到問題我已經(jīng)很開心了，建議你吧那個(gè)日期如何調(diào)出來，能減出來一個(gè)正確的時(shí)間就好啦！
2016-11-04
我也沒有效果，我的效果是一直就顯示0，最后alert一下ret，減成了賦值，原來const endTime=new Date(2016,10,3,18,47,52);這個(gè)代碼我用DW用不成，而且var curTime=new Date();這個(gè)值取出來也不是標(biāo)準(zhǔn)的年月日時(shí)分秒，所以ret返回的一直是0。不知道你是不是和我一樣的問題。