曾经有一份完好的硬盘放在我面前，我没有珍惜，等我失去的时候我才追悔莫及，人世间最痛苦的事情莫过于此。如果上天能够给我一个重来一次的机会，我一定备份一定不作死TT

Express使用ejs

1
2

app.set('views',path.join(_dirname,'views'));
app.set('view engine','ejs');

弹出层的实现思路

本文讲述的弹出层是点击按钮后弹出两个层，一个是遮罩层,一个是弹出的想让用户看到的层，不能改变页面布局怎么做呢？就需要动态生成这两个层，用js控制它们的出现与消失，控制它们的位置，然后css中写对应的样式代码，这也就是构建弹出层的大体思路

遮罩层的实现

遮罩层的实现要遮罩住整个页面，这个层就需要有整个页面的高度和宽度

1
2

var allWidth=document.body.scrollWidth;
var allHeight=document.body.scrollHeight;

scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标
event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标
document.documentElement.scrollTop 垂直方向滚动的值
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量
参考链接

总结一下自己学的，自己也总结一下跟着教程遇到的坑

关于环境配置和模块安装

首先是安装环境，node.js不用说了，还有Express和Mongodb
我在本地电脑Windows跟着教程一切都进行得很顺利，然而在阿里云主机的linux上面在安装express然后npm start,一直在报错，报错的是error：缺少XX模块什么的，这就很无奈了，明明应该直接npm stall就可以安装所需的模块，但是还是缺少，没办法，好的，它报缺少什么模块你就装什么咯，用npm install XXX（模块）一个一个装，虽然很烦，但是也无计可施，我也是一个一个装，最后发现没再报错也是比较欣喜的，学了一个阶段后，发现后面的模块安装都是先在package.json中的dependencies加上所需的模块再npm install即可完成

对于前端学习，主机和服务器知识往往会被忽略，这里我就找网上的一些东西来总结记录一下，侵删，如有错误,请指正

1.它们到底是什么

主机:
计算机除去输入输出设备以外的主要机体部分，在网络技术中是关于发送和接受信息的终端设备
虚拟主机：
就是网站VPS，一台服务器上还有多个网站，大家共享这台服务器的硬件和带宽，每一个虚拟主机都具有独立的域名和完整的Internet服务器（支持WWW，ftp等），这个虚拟主机技术用来节省服务器硬件成本的技术，由于虚拟主机是从服务器划分出来的，不能自己安装环境等，系统与服务器保持一致，同一个操作系统，同一个IP,不同域名，共享带宽，共享资源（CPU,内存，储存空间）
云主机：
云主机就是虚拟服务器，类似VPS主机的虚拟化技术，VPS是采用虚拟软件，VZ或VM在一台主机上出多个类似独立主机的部分，每个部分都可以做单独的操作系统，管理方法跟主机一样，云基于计算机的分布式连接

关于css编写书写顺序和规范
学习前端几个月了，都还没有好好地看看css编写规范，觉得自己代码写得都很乱，现在稍微从网上找了些来总结一下，当然并不完整，选一些比较重要的写写我也记一下

CSS书写顺序

• 位置属性(position, top, right, z-index, display, float等)
• 大小(width, height, padding, margin)
• 文字系列(font, line-height, letter-spacing, color- text-align等)
• 背景(background, border等)
• 其他(animation, transition等)

总体来说就是先写定位，再写盒模型，再写其他的
通过规范的css书写顺序可以提升浏览器渲染dom的速度

游戏逻辑

游戏分为两类：一种是基于时间流逝的游戏，一种是基于玩家响应的游戏，2048属于后者，2048是基于用户在电脑上，监听用户按下的上下左右来进行一系列的逻辑，然后实现页面上的变化
keaibaobao

代码的实现

首先是页面的设计，需要有一个标题2048还有score，还有下面的移动方格，方格的底子可以直接写出来，但是由于有数字的格子是会变化的，则需要用js控制动态生成
实现动态生成的部分代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

function updateBoardView(){
    $(".number-cell").remove();
    for(var i=0;i<4;i++){
        for(var j=0;j<4;j++){
            $("#grid-container").append('<div class="number-cell" id="number-cell-'+i+'-'+j+'"></div>');
            var theNumberCell=$('#number-cell-'+i+'-'+j);
            if(board[i][j]==0){
                theNumberCell.css('width','0px');
                theNumberCell.css('height','0px');
                theNumberCell.css('top',getPosTop(i,j)+50);
                theNumberCell.css('left',getPosLeft(i,j)+50);
            }
            else{
                theNumberCell.css('width','100px');
                theNumberCell.css('height','100px');
                theNumberCell.css('top',getPosTop(i,j));
                theNumberCell.css('left',getPosLeft(i,j));
                theNumberCell.css('background-color',getNumberBackgroundColor(board[i][j]));
                theNumberCell.text(board[i][j]);                
            }
        }
    }
}

关于如何搭建这个博客与为什么搭建这个博客