請(qǐng)問(wèn)這里哪里出問(wèn)題了
照著視頻完成的，但最后怎么刷新都是顯示這個(gè)，請(qǐng)問(wèn)是哪里出問(wèn)題了
html文件：
<!DOCTYPE?html> <html> <head> ??<meta?charset="UTF-8"> ??<title>Countdown</title> ??<link?rel="stylesheet"?href="./style/style.css"> </head> <body> ??<canvas?id="countdown"> ????當(dāng)前瀏覽器不支持Canvas，請(qǐng)更換瀏覽器后再試 ??</canvas> ??<script?type="text/javascript"?src="Countdown-digit.js"></script> ??<script?type="text/javascript"?src="Countdown.js"></script> </body> </html>
Countdown-digit.js文件：
//?存放模型 digit?= ??[ ????[ ??????[0,?0,?1,?1,?1,?0,?0], ??????[0,?1,?1,?0,?1,?1,?0], ??????[1,?1,?0,?0,?0,?1,?1], ??????[1,?1,?0,?0,?0,?1,?1], ??????[1,?1,?0,?0,?0,?1,?1], ??????[1,?1,?0,?0,?0,?1,?1], ??????[1,?1,?0,?0,?0,?1,?1], ??????[1,?1,?0,?0,?0,?1,?1], ??????[0,?1,?1,?0,?1,?1,?0], ??????[0,?0,?1,?1,?1,?0,?0] ????],?//0 ????[ ??????[0,?0,?0,?1,?1,?0,?0], ??????[0,?1,?1,?1,?1,?0,?0], ??????[0,?0,?0,?1,?1,?0,?0], ??????[0,?0,?0,?1,?1,?0,?0], ??????[0,?0,?0,?1,?1,?0,?0], ??????[0,?0,?0,?1,?1,?0,?0], ??????[0,?0,?0,?1,?1,?0,?0], ??????[0,?0,?0,?1,?1,?0,?0], ??????[0,?0,?0,?1,?1,?0,?0], ??????[1,?1,?1,?1,?1,?1,?1] ????],?//1 ????[ ??????[0,?1,?1,?1,?1,?1,?0], ??????[1,?1,?0,?0,?0,?1,?1], ??????[0,?0,?0,?0,?0,?1,?1], ??????[0,?0,?0,?0,?1,?1,?0], ??????[0,?0,?0,?1,?1,?0,?0], ??????[0,?0,?1,?1,?0,?0,?0], ??????[0,?1,?1,?0,?0,?0,?0], ??????[1,?1,?0,?0,?0,?0,?0], ??????[1,?1,?0,?0,?0,?1,?1], ??????[1,?1,?1,?1,?1,?1,?1] ????],?//2 ????[ ??????[1,?1,?1,?1,?1,?1,?1], ??????[0,?0,?0,?0,?0,?1,?1], ??????[0,?0,?0,?0,?1,?1,?0], ??????[0,?0,?0,?1,?1,?0,?0], ??????[0,?0,?1,?1,?1,?0,?0], ??????[0,?0,?0,?0,?1,?1,?0], ??????[0,?0,?0,?0,?0,?1,?1], ??????[0,?0,?0,?0,?0,?1,?1], ??????[1,?1,?0,?0,?0,?1,?1], ??????[0,?1,?1,?1,?1,?1,?0] ????],?//3 ????[ ??????[0,?0,?0,?0,?1,?1,?0], ??????[0,?0,?0,?1,?1,?1,?0], ??????[0,?0,?1,?1,?1,?1,?0], ??????[0,?1,?1,?0,?1,?1,?0], ??????[1,?1,?0,?0,?1,?1,?0], ??????[1,?1,?1,?1,?1,?1,?1], ??????[0,?0,?0,?0,?1,?1,?0], ??????[0,?0,?0,?0,?1,?1,?0], ??????[0,?0,?0,?0,?1,?1,?0], ??????[0,?0,?0,?1,?1,?1,?1] ????],?//4 ????[ ??????[1,?1,?1,?1,?1,?1,?1], ??????[1,?1,?0,?0,?0,?0,?0], ??????[1,?1,?0,?0,?0,?0,?0], ??????[1,?1,?1,?1,?1,?1,?0], ??????[0,?0,?0,?0,?0,?1,?1], ??????[0,?0,?0,?0,?0,?1,?1], ??????[0,?0,?0,?0,?0,?1,?1], ??????[0,?0,?0,?0,?0,?1,?1], ??????[1,?1,?0,?0,?0,?1,?1], ??????[0,?1,?1,?1,?1,?1,?0] ????],?//5 ????[ ??????[0,?0,?0,?0,?1,?1,?0], ??????[0,?0,?1,?1,?0,?0,?0], ??????[0,?1,?1,?0,?0,?0,?0], ??????[1,?1,?0,?0,?0,?0,?0], ??????[1,?1,?0,?1,?1,?1,?0], ??????[1,?1,?0,?0,?0,?1,?1], ??????[1,?1,?0,?0,?0,?1,?1], ??????[1,?1,?0,?0,?0,?1,?1], ??????[1,?1,?0,?0,?0,?1,?1], ??????[0,?1,?1,?1,?1,?1,?0] ????],?//6 ????[ ??????[1,?1,?1,?1,?1,?1,?1], ??????[1,?1,?0,?0,?0,?1,?1], ??????[0,?0,?0,?0,?1,?1,?0], ??????[0,?0,?0,?0,?1,?1,?0], ??????[0,?0,?0,?1,?1,?0,?0], ??????[0,?0,?0,?1,?1,?0,?0], ??????[0,?0,?1,?1,?0,?0,?0], ??????[0,?0,?1,?1,?0,?0,?0], ??????[0,?0,?1,?1,?0,?0,?0], ??????[0,?0,?1,?1,?0,?0,?0] ????],?//7 ????[ ??????[0,?1,?1,?1,?1,?1,?0], ??????[1,?1,?0,?0,?0,?1,?1], ??????[1,?1,?0,?0,?0,?1,?1], ??????[1,?1,?0,?0,?0,?1,?1], ??????[0,?1,?1,?1,?1,?1,?0], ??????[1,?1,?0,?0,?0,?1,?1], ??????[1,?1,?0,?0,?0,?1,?1], ??????[1,?1,?0,?0,?0,?1,?1], ??????[1,?1,?0,?0,?0,?1,?1], ??????[0,?1,?1,?1,?1,?1,?0] ????],?//8 ????[ ??????[0,?1,?1,?1,?1,?1,?0], ??????[1,?1,?0,?0,?0,?1,?1], ??????[1,?1,?0,?0,?0,?1,?1], ??????[1,?1,?0,?0,?0,?1,?1], ??????[0,?1,?1,?1,?0,?1,?1], ??????[0,?0,?0,?0,?0,?1,?1], ??????[0,?0,?0,?0,?0,?1,?1], ??????[0,?0,?0,?0,?1,?1,?0], ??????[0,?0,?0,?1,?1,?0,?0], ??????[0,?1,?1,?0,?0,?0,?0] ????],?//9 ????[ ??????[0,?0,?0,?0], ??????[0,?0,?0,?0], ??????[0,?1,?1,?0], ??????[0,?1,?1,?0], ??????[0,?0,?0,?0], ??????[0,?0,?0,?0], ??????[0,?1,?1,?0], ??????[0,?1,?1,?0], ??????[0,?0,?0,?0], ??????[0,?0,?0,?0] ????]?//: ??];
Countdown.js文件
var?radius?=?8;
var?margin_top?=?60;
var?margin_left?=?30;
const?endTime?=?new?Date(2019,?7,?14,?22,?04,?52);
var?currentShowTimeSeconds?=?0;
window.onload?=?function()?{
??var?countdown?=?document.getElementById("countdown");
??countdown.width?=?1000;
??countdown.height?=?700;
??if?(countdown.getContext("2d"))?{
????var?context?=?countdown.getContext("2d");
??}?else?{
????alert("當(dāng)前瀏覽器不支持Canvas，請(qǐng)更換瀏覽器后再試");
??}
??currentShowTimeSeconds?=?getCurrentShowTimeSeconds();
??render(context);
}
function?getCurrentShowTimeSeconds()?{
??var?currentTime?=?new?Date();
??var?ret?=?endTime.getTime()?-?currentTime.getTime();
??ret?=?Math.round(ret?/?1000);
??return?ret?>=?0???ret?:?0;
}
function?render(context)?{
??var?hours?=?parseInt(currentShowTimeSeconds?/?3600);
??var?minutes?=?parseInt((currentShowTimeSeconds?-?hours?*?3600)?/?60);
??var?seconds?=?currentShowTimeSeconds?%?60;
??renderDigit(margin_left,?margin_top,?parseInt(hours?/?10),?context);
??renderDigit(margin_left?+?15?*?(radius?+?1),?margin_top,?parseInt(hours?%?10),?context);
??renderDigit(margin_left?+?30?*?(radius?+?1),?margin_top,?10,?context);
??renderDigit(margin_left?+?39?*?(radius?+?1),?margin_top,?parseInt(minutes?/?10),?context);
??renderDigit(margin_left?+?54?*?(radius?+?1),?margin_top,?parseInt(minutes?%?10),?context);
??renderDigit(margin_left?+?69?*?(radius?+?1),?margin_top,?10,?context);
??renderDigit(margin_left?+?78?*?(radius?+?1),?margin_top,?parseInt(seconds?/?10),?context);
??renderDigit(margin_left?+?93?*?(radius?+?1),?margin_top,?parseInt(seconds?%?10),?context);
}
function?renderDigit(x,?y,?num,?context)?{
??context.fillStyle?=?"rgb(0,?102,?153)";
??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)?{
????????context.beginPath();
????????//?第(i,j)個(gè)圓的圓心位置
????????context.arc(x?+?j?*?2?*?(radius?+?1)?+?(radius?+?1),?y?+?i?*?2?*?(radius?+?1)?+?(radius?+?1),?radius,?0,?2?*?Math.PI);
????????context.closePath();
????????context.fill();
??????}
????}
??}
}
2020-04-04
試試把天數(shù)改成比現(xiàn)在的天數(shù)大
2019-08-16
補(bǔ)充一下，不是ret值不能太大，是Math.round(ret/100000)這個(gè)值保持在5位數(shù)字以下
2019-08-16
我們程序員呢，最忌諱的是遇事緊張，著急。應(yīng)該遇到事情先讓自己冷靜下來(lái)，一步一步查看。init開始，一步一步打印我們需要的值，看下來(lái)發(fā)現(xiàn)是 currentShowTimeSeconds 值太大，導(dǎo)致render函數(shù)中hours、minutes、seconds三個(gè)常量太大，進(jìn)而導(dǎo)致函數(shù)renderDigit中參數(shù)num太大，找不到digit數(shù)組中的元素，最后顯示你看到的樣子，解決方法：函數(shù)getCurrentShowTimeSeconds中的ret/1000改為 ret/100000, ret不能太大，保持在5位數(shù)字一下就好。有什么錯(cuò)誤的地方，請(qǐng)各位同行多多指教