花一块钱----快速部署一个自己的静态网站(京东云服务器)
2017-08-30 18:47
555 查看
最近参加了公司的前端后台团队帮忙,小白一枚,一直在学习,学习的都是基础,所以一个多月没有写博客。
前几天在大神郭林的公众号文章里发现了一片福利文章。
京东服务器搞活动,我花了一块钱买了两个月的(嘿嘿嘿),有意向的小白下面文章里有链接。
没买的同学注意,只能买一次,买了一块钱的续费就变成正常价位了(反手就给自己一个脸蛋子)。
这几天一直忙项目,到今天才闲下来自己发布一个静态网站试试。
贴出郭林大神文章地址:点击打开链接
再贴出我部署好的网站:点击打开链接
大神的文章写的很详细了,我就贴一下我部署的静态网站的代码,是很多天前看视频写的一个demo,很好看。
主要是怕以后找不到了,在这里记录下。
html:
坐标js:
cavas绘制js:
前几天在大神郭林的公众号文章里发现了一片福利文章。
京东服务器搞活动,我花了一块钱买了两个月的(嘿嘿嘿),有意向的小白下面文章里有链接。
没买的同学注意,只能买一次,买了一块钱的续费就变成正常价位了(反手就给自己一个脸蛋子)。
这几天一直忙项目,到今天才闲下来自己发布一个静态网站试试。
贴出郭林大神文章地址:点击打开链接
再贴出我部署好的网站:点击打开链接
大神的文章写的很详细了,我就贴一下我部署的静态网站的代码,是很多天前看视频写的一个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(); } }
相关文章推荐
- 分享一个强大的工具,可以快速查看自己公司网站或竞争对手网站的CDN情况
- 如何用自己的电脑作为服务器搭一个网站
- 阿里云快速搭建一个静态网站
- 一个Web应用(比如网站)是如何部署在多个web服务器上的?同步软件有讲到
- 分享一个强大的工具,可以快速查看自己公司网站或竞争对手网站的CDN情况
- 用npm来部署快速一个httpweb服务器
- 如何用自己电脑做服务器,绑定域名建一个个人网站
- 在本机环境中搭建一个真正的web网站环境(和网站部署到服务器上效果一致)
- 使用Nodejs快速搭建一个的本地静态文件服务器
- 如何快速部署自己的插件到Nexus服务器(P2 Update site)?
- 一个检查自己服务器的网站
- 初试部署自己的网站到服务器
- 如何做一个自己的服务器网站
- JAVA WEB快速入门之从编写一个JSP WEB网站了解JSP WEB网站的基本结构、调试、部署
- 要让自己快速融入一个陌生的环境中
- java 服务器接口快速开发之servlet,自己的一点心得
- 【jQuery插件】用jQuery Masonry快速构建一个pinterest网站布局(转)
- 如何快速搭建静态资源服务器
- 你想建设一个能承受500万PV/每天的网站吗?服务器每秒要处理多少个请求才能应对?
- 在自己的电脑上搭建服务器,发布自己的网站(学习之用)