最近参加了公司的前端后台团队帮忙，小白一枚，一直在学习，学习的都是基础，所以一个多月没有写博客。
前几天在大神郭林的公众号文章里发现了一片福利文章。
京东服务器搞活动，我花了一块钱买了两个月的（嘿嘿嘿），有意向的小白下面文章里有链接。
没买的同学注意，只能买一次，买了一块钱的续费就变成正常价位了（反手就给自己一个脸蛋子）。
这几天一直忙项目，到今天才闲下来自己发布一个静态网站试试。
贴出郭林大神文章地址：点击打开链接
再贴出我部署好的网站：点击打开链接
大神的文章写的很详细了，我就贴一下我部署的静态网站的代码，是很多天前看视频写的一个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();}}
