最近參加了公司的前端後臺團隊幫忙，小白一枚，一直在學習，學習的都是基礎，所以一個多月沒有寫博客。
前幾天在大神郭林的公衆號文章裏發現了一片福利文章。
京東服務器搞活動，我花了一塊錢買了兩個月的（嘿嘿嘿），有意向的小白下面文章裏有鏈接。
沒買的同學注意，只能買一次，買了一塊錢的續費就變成正常價位了（反手就給自己一個臉蛋子）。
這幾天一直忙項目，到今天才閒下來自己發佈一個靜態網站試試。
貼出郭林大神文章地址：點擊打開鏈接
再貼出我部署好的網站：點擊打開鏈接
大神的文章寫的很詳細了，我就貼一下我部署的靜態網站的代碼，是很多天前看視頻寫的一個demo，很好看。
主要是怕以後找不到了，在這裏記錄下。
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>計時器</title>
</head>
<body style="height: 100%; width: 100%">
<canvas id="canvas" style="height: 100%;width: 100%">
當前瀏覽器不支持Canvas，請更換瀏覽器後再試
</canvas>
<script src="digit.js"></script>
<script src="countdown.js"></script>
</body>
</html>座標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]
]//:
];cavas繪製js：
var WINDOW_WIDTH = 1024;
var WINDOW_HEIGHT = 768;
var RADIUS = 8;
var MARGIN_TOP = 60;
var MARGIN_LEFT = 30;
// 結束的時間
const endTime = new Date();
// 設置據當前時間向後推一小時時間
endTime.setTime(endTime.getTime() + 3600 * 1000);
// 現在倒計時有多少秒
var curShowTimeSeconds = 0;
// 聲明存儲小球的數組
var balls = [];
// 存儲顏色的數組
const colors = ["#33B5E5","#0099cc","#aa66cc","#9933cc","#99cc00","#669900","#ffbb33","#ff8800","#ff4444","#cc0000"];
window.onload = function () {
// 屏幕body的寬高
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");
canvas.width = WINDOW_WIDTH;
canvas.height = WINDOW_HEIGHT;
curShowTimeSeconds = getCurrentShowTimeSeconds();
setInterval(
function () {
// 繪製
render(context);
update();
},
50
);
}
function render(cxt) {
// 刷新操作，這裏刷新整個屏幕
cxt.clearRect(0, 0, cxt.canvas.width, cxt.canvas.height);
var hours = parseInt(curShowTimeSeconds / 3600);
var minutes = parseInt((curShowTimeSeconds - hours * 3600) / 60);
var seconds = curShowTimeSeconds % 60;
// 繪製時間
renderDigit(MARGIN_LEFT, MARGIN_TOP, parseInt(hours / 10), cxt);
renderDigit(MARGIN_LEFT + 15*(RADIUS + 1), MARGIN_TOP, parseInt(hours %10), cxt);
renderDigit(MARGIN_LEFT + 30*(RADIUS + 1), MARGIN_TOP, 10, cxt);
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)";
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 + 1), RADIUS, 0, 2*Math.PI);
cxt.closePath();
cxt.fill();
}
}
}
}
// 算出距離結束時間還有多少毫秒
function getCurrentShowTimeSeconds() {
var curTime = new Date();
var ret = endTime.getTime() - curTime.getTime();
ret = Math.round(ret / 1000);
// 如果需要改成時鐘效果 則直接計算今天已經過去多少毫秒
// var ret = curTime.getHours() * 3600 + curTime.getMinutes() * 60 + curTime.getSeconds();
return ret > 0 ? ret : 0;
}
// 處理變化
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;
if (nextSeconds != curSeconds){
// 如果小時的十位數發生改變
if (parseInt(curHours/10) != parseInt(nextHours/10)){
addBalls(MARGIN_LEFT + 0, MARGIN_TOP, parseInt(curHours/10));
}
// 小時的個位數
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(nextSeconds%10));
}
curShowTimeSeconds = nextShowTimeSeconds;
}
// 對已經存在的小球狀態進行更新
updateBalls();
}
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),
y:y+i*2*(RADIUS + 1) + (RADIUS + 1),
// 小球的加速度
g:1.5 + Math.random(),
// x方向的速度
vx:Math.pow(-1, Math.ceil(Math.random()*1000)) * 4,
// y軸方向的速度，設置爲-5，即小球會有一個向上拋的動作
vy:-15,
// 隨機出一個顏色
color:colors[Math.floor(Math.random()*colors.length)]
};
// 添加到數組中
balls.push(aBall);
}
}
}
}
// 已經存在的小球狀態更新
function updateBalls() {
for (var i = 0;i < balls.length;i++){
// 小球x，y方向的位置
balls[i].x += balls[i].vx;
balls[i].y += balls[i].vy;
// y軸方向速度受加速度影響
balls[i].vy += balls[i].g;
// 判斷是否出邊界
if (balls[i].y >= WINDOW_HEIGHT - RADIUS){
// 先將小球位置固定
balls[i].y = WINDOW_HEIGHT - RADIUS;
// 在設置小球y軸速度的方向（1取反。2設置由於摩擦產生的阻力將速度變爲原來的0.75）
balls[i].vy = -balls[i].vy * 0.75;
}
}
// 循環取出
var cnt = 0;
for (var i = 0;i < balls.length;i++){
// 如果小球的右邊緣大於零（右側還在canvas內）
// 並且小球的左邊緣還在canvas內
if (balls[i].x + RADIUS > 0 && balls[i].x - RADIUS < WINDOW_WIDTH){
// 當發現符合上面判斷條件（在畫布內）的小球，則負值給cnt位置
// cnt從0開始，循環之後，在cnt之內的都是還留在畫布內的小球
balls[cnt++] = balls[i];
}
}
// 將cnt之後的小球都刪掉
while (balls.length > cnt){
balls.pop();
}
}
