????：html部分<!DOCTYPE html> <!--下面三個百分比都是為了實現(xiàn)后期項目優(yōu)化的時候，實現(xiàn)自適應(yīng)屏幕的寬度和高度--> <html style="height: 100%;"> <!--這個需要HTML標(biāo)簽上也得加上style="height:100%"才行，要不然會顯示一半
html部分
<!DOCTYPE html>
<!--下面三個百分比都是為了實現(xiàn)后期項目優(yōu)化的時候，實現(xiàn)自適應(yīng)屏幕的寬度和高度-->
<html style="height: 100%;">
<!--這個需要HTML標(biāo)簽上也得加上style="height:100%"才行，要不然會顯示一半，經(jīng)常用CSS的都知道，BODY 想高度100%，外標(biāo)簽HTML也得設(shè)置100%-->
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body style="height: 100%;">
<canvas id="canvas" style="height: 100%;"></canvas>
<script type="text/javascript" src="js/digit.js"></script>
<script type="text/javascript" src="js/countdown9.js"></script>
</body>
</html>
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]
]//:
];
countdown9.js部分
var WINDOW_WIDTH = 1024;
var WINDOW_HEIGHT = 768;
var RADIUS = 8; //定義小球的半徑
var MARGIN_TOP = 60; //每個數(shù)字距離畫布的上邊距的距離
var MARGIN_LEFT = 30; //第一個數(shù)字距離畫布的左邊距的距離
//定制截止時間(月是從０開始數(shù)一直到１１)
//var endTime = new Date();//（2017,11,23,23,12,52）如果在這個括號里面填上數(shù)字，前面的ｖａｒ改成ｃｏｎｓｔ就是填寫的時間到當(dāng)前時間的差的倒計時，最多只能有９９個小時，
//endTime.setTime( endTime.getTime()+3600*1000);//這種算法可以保證每次打開時都是倒計時一小時（１小時＝６０分鐘＝３６００秒＝３６００*１０００毫秒）
//小時的位置只有兩位數(shù)，一天有２４個小時，最多只能倒計時四天，
//如果需要打破這個限制，可以把小時擴充成三位數(shù)，甚至增加
//因為倒計時每一秒的變化，要加上動畫的效果，動畫的效果要不停的和當(dāng)前的時間
//做一個比較，為此設(shè)計一個全局變量來表示現(xiàn)在倒計時需要有多少秒，毫秒在計算中
//要轉(zhuǎn)換成秒，毫秒的細(xì)節(jié)是不需要的。
var curShowTimeSeconds = 0; //初始化
//為了儲存生成的小球，要設(shè)一個數(shù)據(jù)結(jié)構(gòu)，
var balls = []; //初始化一個空的數(shù)組,一旦產(chǎn)生新的小球，就添加在數(shù)組里面
//小球是彩色的，需要一個儲存顏色的數(shù)組
const colors = ["red", "yellow", "lime", "purple", "deeppink",
"springgreen", "blue", "green", "tomato", "turquoise"
]
window.onload = function() {
//實現(xiàn)屏幕的自適應(yīng)
WINDOW_WIDTH = document.body.clientWidth;
WINDOW_HEIGHT = document.body.clientHeight;
MARGIN_LEFT = Math.round(WINDOW_WIDTH / 10);
RADIUS = Math.round(WINDOW_WIDTH * 4 / 5 / 108) - 1;
MARGIN_TOP = Math.round(WINDOW_HEIGHT / 5);
var canvas = document.getElementById('canvas');
var context = canvas.getContext("2d");
//這種方式調(diào)用寬高，有兩個好處
//第一屏幕的大小改變起來非常的方便
//第二個后續(xù)在做屏幕的自適應(yīng)的時候，只需要計算兩個變量的值，非常的方便
canvas.width = WINDOW_WIDTH;
canvas.height = WINDOW_HEIGHT;
//調(diào)用render函數(shù)，傳入context參數(shù)，獲得繪圖的上下文環(huán)境
curShowTimeSeconds = getCurrentShowTimeSeconds();
setInterval(function() {
render(context); //繪制當(dāng)前的畫面
update(); //根據(jù)繪制畫面所需要的數(shù)據(jù)結(jié)構(gòu)，對數(shù)據(jù)結(jié)構(gòu)進(jìn)行一定的調(diào)整
}, 50);
}
function getCurrentShowTimeSeconds() {
var curTime = new Date(); //獲取當(dāng)前的時間
var ret = curTime.getHours()*3600+ curTime.getMinutes()*60+curTime.getSeconds();
return ret ;
}
//對當(dāng)前的數(shù)據(jù)進(jìn)行調(diào)整，處理時間的變化
function update() {
//下一次要顯示的時間
var nextShowTimeSeconds = getCurrentShowTimeSeconds();
var nextHours = parseInt(nextShowTimeSeconds / 3600);
var nextMinutes = parseInt((nextShowTimeSeconds - nextHours * 3600) / 60);
var nextSeconds = nextShowTimeSeconds % 60;
var curHours = parseInt(curShowTimeSeconds / 3600);
var curMinutes = parseInt((curShowTimeSeconds - curHours * 3600) / 60);
var curSeconds = curShowTimeSeconds % 60;
//判斷下一次要顯示的時間和當(dāng)前所顯示的時間有沒有變化，
//如果有變化，就改變curShowTimeSeconds
if(nextSeconds != curSeconds) {
//如果當(dāng)前的小時的十位數(shù)已經(jīng)不等于下一次要顯示的小時的十位數(shù)
if(parseInt(curHours / 10) != parseInt(nextHours / 10)) {
//創(chuàng)建一個新的函數(shù)addBalls負(fù)責(zé)加小球，找到小球的位置，以及相應(yīng)的數(shù)字，生成一系列小球
addBalls(MARGIN_LEFT + 0, MARGIN_TOP, parseInt(curHours / 10));
}
//創(chuàng)建小球的一系列操作
//對小時的個位數(shù)的操作
if(parseInt(curHours % 10) != parseInt(nextHours % 10)) {
addBalls(MARGIN_LEFT + 15 * (RADIUS + 1), MARGIN_TOP, parseInt(curHours / 10));
}
//對時間的分鐘的十位數(shù)的操作
if(parseInt(curMinutes / 10) != parseInt(nextMinutes / 10)) {
addBalls(MARGIN_LEFT + 39 * (RADIUS + 1), MARGIN_TOP, parseInt(curMinutes / 10));
}
//對時間的分鐘的個位數(shù)的操作
if(parseInt(curMinutes % 10) != parseInt(nextMinutes % 10)) {
addBalls(MARGIN_LEFT + 54 * (RADIUS + 1), MARGIN_TOP, parseInt(curMinutes % 10));
}
//對時間的秒鐘的十位數(shù)的操作
if(parseInt(curSeconds / 10) != parseInt(nextSeconds / 10)) {
addBalls(MARGIN_LEFT + 78 * (RADIUS + 1), MARGIN_TOP, parseInt(curSeconds / 10));
}
//對時間的秒鐘的個位數(shù)的操作
if(parseInt(curSeconds % 10) != parseInt(nextSeconds % 10)) {
addBalls(MARGIN_LEFT + 93 * (RADIUS + 1), MARGIN_TOP, parseInt(nextSeconds % 10));
}
curShowTimeSeconds = nextShowTimeSeconds;
}
updateBalls();
//數(shù)組的元素在不斷的增加，但是沒有減小，這樣的程序是不能長時間運行的，
//每個計算機都有它的極限，，他在不斷的占有我們的內(nèi)存，其實當(dāng)balls走出我們的畫面的時候
//這個小球就可以不留在數(shù)組里了，設(shè)置一個機制，刪除走出畫面的數(shù)組，這個程序就可以長時間運行了
// console.log(balls.length);//打印balls數(shù)組的長度
}
//讓新產(chǎn)生的小球動起來
function updateBalls() {
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;
if(balls[i].y >= WINDOW_HEIGHT - RADIUS) {
balls[i].y = WINDOW_HEIGHT - RADIUS;
balls[i].vy = -balls[i].vy * 0.75;
}
}
//設(shè)置一個機制，刪除走出畫面的數(shù)組，保證這個程序可以長時間運行
var cnt = 0;
for(var i = 0; i < balls.length; i++) //遍歷ｂａｌｌｓ數(shù)組
if(balls[i].x + RADIUS > 0 && balls[i].x - RADIUS < WINDOW_WIDTH) //判斷小球是否還在畫面內(nèi)
balls[cnt++] = balls[i]; //保留留在畫面的小球
//刪除不需要的小球
while(balls.length > Math.min(300, cnt)) {
balls.pop();
}
}
//實現(xiàn)addBalls（）
function addBalls(x, y, num) {
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) { //如果為１，就添加一個小球
var aBall = {
x: x + j * 2 * (RADIUS + 1) + (RADIUS + 1), //ｘ坐標(biāo)
y: y + i * 2 * (RADIUS + 1) + (RADIUS + 1), //ｙ坐標(biāo)
g: 1.5 + Math.random(), //小球的加速度，設(shè)置隨機的加速度會使小球更加的活潑
vx: Math.pow(-1, Math.ceil(Math.random() * 1000)) * 4, //小球在ｘ方向的速度
vy: -5, //ｙ方向的速度
color: colors[Math.floor(Math.random() * colors.length)]
}
balls.push(aBall);
}
}
//繪制canvas的畫布
function render(cxt) {
//對一個矩形的圖像進(jìn)行刷新操作
cxt.clearRect(0, 0, WINDOW_WIDTH, WINDOW_HEIGHT);
//先繪制時鐘的數(shù)值
var hours = parseInt(curShowTimeSeconds / 3600);
var minutes = parseInt((curShowTimeSeconds - hours * 3600) / 60);
var seconds = curShowTimeSeconds % 60;
//一個數(shù)字一個數(shù)字的繪制時間
renderDigit(MARGIN_LEFT, MARGIN_TOP, parseInt(hours / 10), cxt)
//15=7*2+1
renderDigit(MARGIN_LEFT + 15 * (RADIUS + 1), MARGIN_TOP, parseInt(hours % 10), cxt)
//30=15+15
renderDigit(MARGIN_LEFT + 30 * (RADIUS + 1), MARGIN_TOP, 10, cxt)
//39=30+(4*2+1)
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);
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();
}
}
function renderDigit(x, y, num, cxt) {
cxt.fillStyle = "rgb(0,102,153)"; //設(shè)置顏色
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();
//計算第(i,j)個圓的圓心的位置:
//（假設(shè)開始點是x,y,圓的半徑是R，兩個圓之間的外邊距是２）
//centerX:x+j*2*(R+1)+(R+1);
//centerY:y+i*2*(R+1)+(R+1);
cxt.arc(x + j * 2 * (RADIUS + 1) + (RADIUS + 1), y + i * 2 * (RADIUS + 1) + (RADIUS + 1), RADIUS, 0, 2 * Math.PI)
cxt.closePath()
cxt.fill()
}
}
精心整理的學(xué)習(xí)筆記，希望對大家可以有所幫助額。如果對您有所幫助，請幫忙頂頂額。