JS中取整以及随机颜色问题

　　前言：感觉自己已经好久好久没有写博客了，最近都是在写在线笔记比较多。现在来到新公司了，昨天刚刚完成一个项目所以今天有空研究研究一下前端方面的技术。下午在看一个游戏代码的时候，发现了几个别人留下的不错的代码小技巧。譬如说取整问题，随机颜色问题。其实这些问题都不大，但是仔细研究一下还是别有洞天，对于提高前端开发方面的理解还是很有帮助的。

---

 

取整问题：

　　1、常规方法：

　　　　Math.floor(x)，返回小于等于x，且最接近x的整数；

　　　　　　   Math.floor(1.2);//1

　　　　　　　Math.floor(-2.1);//-3

　　　　Math.ceil(x)，返回大于等于x，且最接近于x的整数。

　　　　　　   Math.ceil(1.2);//2

　　　　　　　Math.ceil(-2.1);//-2

　　以上这两个没什么好解释的，比较容易理解。基本上就是Math对象的方法调用而已，参数主要是针对number基本数据类型的。

　　2、一般方法：

　　　　使用parseInt(x)，这是一个预置的全局函数，可解析一个字符串，并返回一个整数。

　　　　　　   parseInt("12");//12

　　　　　　　parseInt("12abc");//12

　　　　　　　parseInt(12.345);//12

　　　　　　　parseInt(-12.345);//-12

　　　　　　　parseInt("12.333abc");//12

　　　　　　　parseInt("abc");//NaN

　　　　　　　typeof(parseInt("12abc"));//"number"

　　　　　　　parseInt(12.345,8);//10,八进制表示

　　　　注意，当parseInt()函数的参数是正数时，则下取整；如果是负数时，则上取整。简而言之就是，parseInt只会取string或者number参数的整数部分。另外，当字符串首位不是一个数字时，会返回NaN；反之则一直解析字符串，直到遇到非数字时才会停止，并返回前面数字的整数部分。同时parseInt()还接受第二个参数，参数为解析的数字的基数（即多少进制），该值介于 2 ~ 36 之间。

　　3、特殊方法：

　　　　使用"|"、">>" 、">>>"、"^"、"<<"等二元位操作符，操作0位。

　　　　　　12.345 | 0;//12

　　　　　　-12.345 | 0;//-12

　　　　　　12.345 ^ 0;//12

　　　　　　12.345 >> 0;//12

　　　　　　……

　　由于浮点数是不支持位运算的，所以小数部分将不会处理。可能是JS语言（其他编程语言也是）机制的原因，会直接把小数部分“处理”掉，直接返回整数部分而不会报错。

 

---

 

随机颜色问题：

　　　var b = Math.random() * 16777215 |0 ;

　　　var color = "#" + b.toString(16);

　　　var div = document.getElementById("div");

　　　div.style.backgroundColor = color;

　　解释：

　　　　16777215，首先这个数字是颜色白色的十进制表示，它等于2的24次幂减1。为什么是16777215呢？由于颜色计数跟内存一样，是由0开始的。我们平时使用的#000000这种是十六进制表示法，它由三组颜色构成，各占两位十六进制数。也就是（255,255,255），将它转换为二进制的话就是3个八位二进制（即24位）。所以#000000（白色）的十进制值就等于2的24次方减一。

　　　　找到了对应的十进制数后，通过与随机方法相乘以及跟0进行按位或操作进行取整。之后在通过number数据类型的方法toString()把参数设为16，即将该数据转换回十六进制，然后拼接“#”字符就能得到了一组随机的16进制颜色值。