想沉淀开发过程中遇到的问题，避免重复的查询。接下来，我会一点点地将遇到的问题记录在这里。希望这本问题集能减少你在遇到问题时在搜索引擎中漫无目的且耗时地搜索花费的时间，提升开发效率！

css 设置div宽高比1:2

html {height: 100%;width: 100%;}
body {
  height: 100%;
  width: 100%;
  position: relative;
  /*display: flex;
  justify-content: center;
  align-items: center;*/
}
.mydiv {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 10vw;
  height: 20vw;
}
.mydiv #box {
  background: #ccc;
  height: 100%;
  width: 100%;
}
<div class="mydiv">
  <div id="box"></div>
</div>

判断两个小数是否相等

用等于号是肯定不行的。判断两个小数是否相等要用它们的差值和一个很小的小数进行比较，如果小于这个这个小数，则认为两者相等。ES6新增了一个Math.EPSILON极小的常量属性，如比较0.1+0.2是否等于0.3：

0.1+0.2-0.3 < Number.EPSILON

Number.EPSILON实际上是 JavaScript 能够表示的最小精度。误差如果小于这个值，就可以认为已经没有意义了，即不存在误差了。

Number.EPSILON可以用来设置“能够接受的误差范围”。比如，误差范围设为 2 的-50 次方（即Number.EPSILON * Math.pow(2, 2)），即如果两个浮点数的差小于这个值，我们就认为这两个浮点数相等。

5.551115123125783e-17 < Number.EPSILON * Math.pow(2, 2)

Git Rebase

Git Bebase 通常用在如下两点：

合并多次提交纪录
分支合并
当我们在一个过时的分支上面开发的时候，执行 rebase 以此同步 master 分支最新变动；
假如我们要启动一个放置了很久的并行工作，现在有时间来继续这件事情，很显然这个分支已经落后了。这时候需要在最新的基准上面开始工作，所以 rebase 是最合适的选择。

注意：

只要你的分支上需要 rebase 的所有 commits 历史还没有被 push 过，就可以安全地使用 git-rebase来操作。

找两个数组中不重复的部分

function getArrDifference(arr1, arr2) {
        return arr1.concat(arr2).filter(function(v, i, arr) {
            return arr.indexOf(v) === arr.lastIndexOf(v);
       });
 }

将时间字符串转换为Date，并计算该时间之后的日期

let nowDate = new Date('2019-06-21');
    nowDate.setTime(nowDate.getTime()+((30-1)*24*60*60*1000));//往后推30天
let endDate = nowDate.getFullYear()+"-"+(nowDate.getMonth()+1)+"-"+nowDate.getDate();//2019-06-20

参考

事件绑定函数

function bindEvent(elem, type, selector, fn) {
    // 这样处理，可接收两种调用方式 bindEvent(div1, 'click', 'a', function () {...}) 和 bindEvent(div1, 'click', function () {...}) 这两种
    if (fn == null) {
        fn = selector
        selector = null
    }
    // 绑定事件
    elem.addEventListener(type, function (e) {
        var target
        if (selector) {
            // 有 selector 说明需要做事件代理
            // 获取触发时间的元素，即 e.target
            target = e.target
            // 看是否符合 selector 这个条件
            if (target.matches(selector)) {
                fn.call(target, e)
            }
        } else {
            // 无 selector ，说明不需要事件代理
            fn(e)
        }
    })
}

使用

// 使用代理，bindEvent 多一个 'a' 参数
var div1 = document.getElementById('div1')
bindEvent(div1, 'click', 'a', function (e) {
    console.log(this.innerHTML)
})
// 不使用代理
var a = document.getElementById('a1')
bindEvent(div1, 'click', function (e) {
    console.log(a.innerHTML)
})

使用代理的优点如下：

使代码简洁
减少浏览器的内存占用

居中

水平居中

使用margin:0 auto配合元素的width

#center{
    width: 100px;//元素需要固定宽度
    margin: 0 auto;//当元素处于position:absolute时，无效。需要将left和right都设为0才可以。
}

使用绝对定位配合margin

#center{
    width: 100px;//需要固定居中元素的宽度
    position: absolute;
    left: 50%;
    margin-left: -100px; //值为width的一半
}

块级父元素让行内元素居中

#center{
    text-align: center;//居中元素必须是inline或者设置为inline-block
}

利用relative定位与行内样式

#main{
    display: inline-block;//将#main与#center全部设置为inline-block，将包裹他们的内容
    position: relative;
    left: 50%;//将#main往右移其宽度的50%
}
#center{
    display: inline-block;
    position: relative;
    right: 50%;//将#center往左移其宽度的50%,最终#center元素居中
}

通过transform进行设置

#main{
    position: relative;
}
#center{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);//首先left:50%先右移#main50%的宽度，然后通过translateX(-50%)在左移本身50%的宽度
}

flex-box

#main{
    display: flex; //父元素设置为flex
    justify-content: center; 
}

垂直居中

line-height，仅适合小元素，单行文本

#main{
    height: 200px;//居中元素的父元素必须要设置准确height数值
    line-height: 200px;
}

absolute搭配margin

#main{
    position: relative;
}
#center{
    height: 50px; //需要固定居中元素的height值
    position: absolute;
    top: 50%;
    margin-top: -25px;   //值为height的一半
}
或
#center{
    height: 50px; //需要固定居中元素的height值
    position: absolute;
    top: calc(50% - 25px);
}

table-cell配合vertical-align

#main{
    height: 100%;
    display: table;//父元素设置为display:table;
}
#center{//子元素设置为display:table-cell
    display: table-cell;
    vertical-align: middle;
}

transform

#main{
    height:100%;
    position: relative;
}
#center{
    position: absolute;//居中元素被设置为absolute
    top: 50%;//首先top:50%先下移#main50%的高度
    transform: translateY(-50%);//然后通过translateY(-50%)在上移本身50%的高度
}
或
#center{
    margin:50% auto 0; //下移到#main50%的高度
    transform: translateY(-50%);
}
或
#center{
    margin:50vh auto 0; //下移到视口50%的高度
    transform: translateY(-50%);
}

父元素设置为 flex-box

#main {
    height:100%;
    display: flex; 
    align-items: center; 
}

正则表达式大全

校验数字的表达式

数字：^[0-9]*$
n位的数字：^d{n}$
至少n位的数字：^d{n,}$
m-n位的数字：^d{m,n}$
零和非零开头的数字：^(0|[1-9][0-9]*)$
非零开头的最多带两位小数的数字：^([1-9][0-9]*)+(.[0-9]{1,2})?$
带1-2位小数的正数或负数：^(-)?d+(.d{1,2})?$
正数、负数、和小数：^(-|+)?d+(.d+)?$
有两位小数的正实数：^[0-9]+(.[0-9]{2})?$
有1~3位小数的正实数：^[0-9]+(.[0-9]{1,3})?$
非零的正整数：^[1-9]d*$ 或 ^([1-9][0-9]*){1,3}$ 或 ^+?[1-9][0-9]*$
非零的负整数：^-[1-9][]0-9"*$ 或 ^-[1-9]d*$
非负整数：^d+$ 或 ^[1-9]d*|0$
非正整数：^-[1-9]d*|0$ 或^((-d+)|(0+))$
非负浮点数：^d+(.d+)?$ 或 ^[1-9]d*.d*|0.d*[1-9]d*|0?.0+|0$
非正浮点数：^((-d+(.d+)?)|(0+(.0+)?))$ 或 ^(-([1-9]d*.d*|0.d*[1-9]d*))|0?.0+|0$
正浮点数：^[1-9]d*.d*|0.d*[1-9]d*$ 或 ^(([0-9]+.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*.[0-9]+)|([0-9]*[1-9][0-9]*))$
负浮点数：^-([1-9]d*.d*|0.d*[1-9]d*)$ 或 ^(-(([0-9]+.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*.[0-9]+)|([0-9]*[1-9][0-9]*)))$
浮点数：^(-?d+)(.d+)?$ 或 ^-?([1-9]d*.d*|0.d*[1-9]d*|0?.0+|0)$

校验字符的表达式

汉字：^[\u4e00-\u9fa5]{0,}$
英文和数字：^[A-Za-z0-9]+$ 或 ^[A-Za-z0-9]{4,40}$
长度为3-20的所有字符：^.{3,20}$
由26个英文字母组成的字符串：^[A-Za-z]+$
由26个大写英文字母组成的字符串：^[A-Z]+$
由26个小写英文字母组成的字符串：^[a-z]+$
由数字和26个英文字母组成的字符串：^[A-Za-z0-9]+$
由数字、26个英文字母或者下划线组成的字符串：^\w+$ 或 ^\w{3,20}$
中文、英文、数字包括下划线：^[\u4E00-\u9FA5A-Za-z0-9_]+$
中文、英文、数字但不包括下划线等符号：^[\u4E00-\u9FA5A-Za-z0-9]+$ 或 ^[\u4E00-\u9FA5A-Za-z0-9]{2,20}$
11 可以输入含有^%&',;=?$\"等字符：[^%&',;=?$\x22]+
12 禁止输入含有~的字符：[^~\x22]+

特殊需求表达式

Email地址：^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$
域名：[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(/.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+/.?
InternetURL：[a-zA-z]+://[^\s]* 或 ^http://([\w-]+\.)+[\w-]+(/[\w-./?%&=]*)?$
手机号码：^(13[0-9]|14[0-9]|15[0-9]|16[0-9]|17[0-9]|18[0-9]|19[0-9])\d{8}$ (由于工信部放号段不定时，所以建议使用泛解析 ^([1][3,4,5,6,7,8,9])\d{9}$)
电话号码(“XXX-XXXXXXX”、“XXXX-XXXXXXXX”、“XXX-XXXXXXX”、“XXX-XXXXXXXX”、"XXXXXXX"和"XXXXXXXX)：^(\(\d{3,4}-)|\d{3.4}-)?\d{7,8}$
国内电话号码(0511-4405222、021-87888822)：\d{3}-\d{8}|\d{4}-\d{7}
18位身份证号码(数字、字母x结尾)：^((\d{18})|([0-9x]{18})|([0-9X]{18}))$
帐号是否合法(字母开头，允许5-16字节，允许字母数字下划线)：^[a-zA-Z][a-zA-Z0-9_]{4,15}$
密码(以字母开头，长度在6~18之间，只能包含字母、数字和下划线)：^[a-zA-Z]\w{5,17}$
强密码(必须包含大小写字母和数字的组合，不能使用特殊字符，长度在8-10之间)：^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$
日期格式：^\d{4}-\d{1,2}-\d{1,2}
一年的12个月(01～09和1～12)：^(0?[1-9]|1[0-2])$
一个月的31天(01～09和1～31)：^((0?[1-9])|((1|2)[0-9])|30|31)$
钱的输入格式：

有四种钱的表示形式我们可以接受:“10000.00” 和 “10,000.00”, 和没有 “分” 的 “10000” 和 “10,000”：^[1-9][0-9]*$
这表示任意一个不以0开头的数字,但是,这也意味着一个字符"0"不通过,所以我们采用下面的形式：^(0|[1-9][0-9]*)$
一个0或者一个不以0开头的数字.我们还可以允许开头有一个负号：^(0|-?[1-9][0-9]*)$
这表示一个0或者一个可能为负的开头不为0的数字.让用户以0开头好了.把负号的也去掉,因为钱总不能是负的吧.下面我们要加的是说明可能的小数部分：^[0-9]+(.[0-9]+)?$
必须说明的是,小数点后面至少应该有1位数,所以"10."是不通过的,但是 “10” 和 “10.2” 是通过的：^[0-9]+(.[0-9]{2})?$
这样我们规定小数点后面必须有两位,如果你认为太苛刻了,可以这样：^[0-9]+(.[0-9]{1,2})?$
这样就允许用户只写一位小数.下面我们该考虑数字中的逗号了,我们可以这样：^[0-9]{1,3}(,[0-9]{3})*(.[0-9]{1,2})?$
1到3个数字,后面跟着任意个逗号+3个数字,逗号成为可选,而不是必须：^([0-9]+|[0-9]{1,3}(,[0-9]{3})*)(.[0-9]{1,2})?$
备注：这就是最终结果了,别忘了"+"可以用"*"替代如果你觉得空字符串也可以接受的话(奇怪,为什么?)最后,别忘了在用函数时去掉去掉那个反斜杠,一般的错误都在这里

xml文件：^([a-zA-Z]+-?)+[a-zA-Z0-9]+\\.[x|X][m|M][l|L]$
中文字符的正则表达式：[\u4e00-\u9fa5]
双字节字符：[^\x00-\xff] (包括汉字在内，可以用来计算字符串的长度(一个双字节字符长度计2，ASCII字符计1))
空白行的正则表达式：\n\s*\r (可以用来删除空白行)
HTML标记的正则表达式：<(\S*?)[^>]*>.*?</\1>|<.*? /> (网上流传的版本太糟糕，上面这个也仅仅能部分，对于复杂的嵌套标记依旧无能为力)
首尾空白字符的正则表达式：^\s*|\s*$或(^\s*)|(\s*$) (可以用来删除行首行尾的空白字符(包括空格、制表符、换页符等等)，非常有用的表达式)
腾讯QQ号：[1-9][0-9]{4,} (腾讯QQ号从10000开始)
中国邮政编码：[1-9]\d{5}(?!\d) (中国邮政编码为6位数字)
IP地址：\d+\.\d+\.\d+\.\d+ (提取IP地址时有用)
IP地址：((?:(?:25[0-5]|2[0-4]\\d|[01]?\\d?\\d)\\.){3}(?:25[0-5]|2[0-4]\\d|[01]?\\d?\\d))

参考：https://www.cnblogs.com/zxin/archive/2013/01/26/2877765.html

自动获取所有表单元素

使用form的name查找Input元素：

<form id="demo">
  <input name="user-name" />
  <input name="password" />
</form>
...
var form = document.forms.namedItem("demo");//或：document.getElementById("demo");
var userNamr = form['user-name'].value,
   password = form.password.value;

但是，这样有一个问题：当哪个name的input不存在时，form.password就是undefined。下面，我们可以在进一步处理：

$.fn.serizlizeForm = function() {
  var o = {};
  var a = this.serializeArray();
  $.each(a,function(){
    //如果存在两个Input的name相同，则转成一个数组
    if(o[this.name] !== undefined) {
      if(!o[this.name].push) {
        o[this.name] = [o[this.name]];
      }
      o[this.name].push(this.value || '');
    }else {
      o[this.name] = this.value || '';
    }
  });
  return o;
}

这个函数借助JQuery的serizlizeArray获取所有的表单数据，然后再转化成一个Object。若要获取一个表单的内容，只需要调用：

var objData = $('#formName').serizlizeForm();

【问题归纳】前端开发问题集 | css 设置div宽高比1:2 上