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


取整问题:

  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进制颜色值

JS中取整以及随机颜色问题的更多相关文章

  1. JavaScript进阶(五)js中取小数整数部分函数

    js中取小数整数部分函数 丢弃小数部分,保留整数部分 js:parseInt(7/2) 向上取整,有小数就整数部分加1 js: Math.ceil(7/2) 四舍五入 js: Math.round(7 ...

  2. js中取小数整数部分函数;取小数部分

    1.丢弃小数部分,保留整数部分 parseInt(23.56); 结果:23 2.向上取整,有小数就整数部分加1 Math.ceil(23.56) 结果:24 3,四舍五入. Math.round(2 ...

  3. js 向上取整、向下取整、四舍五入

      js 向上取整.向下取整.四舍五入 CreateTime--2018年4月14日11:31:21 Author:Marydon // 1.只保留整数部分(丢弃小数部分) parseInt(5.12 ...

  4. js 除法 取整

    js 除法 取整 1.丢弃小数部分,保留整数部分 js:parseInt(7/2) 2.向上取整,有小数就整数部分加1 js: Math.ceil(7/2) 3,四舍五入. js: Math.roun ...

  5. js 小数取整,js 小数向上取整,js小数向下取整

    js 小数取整,js 小数向上取整,js小数向下取整 >>>>>>>>>>>>>>>>>>& ...

  6. 在js中取选中的radio值

    在js中取选中的radio值 <input type="radio" name="address" value="0" /> & ...

  7. JS 实现取整

    Js 常用数值函数(Math,parseInt)取整   1.丢弃小数部分,保留整数部分parseInt(5/2) 2.向上取整,有小数就整数部分加1Math.ceil(5/2) 3,四舍五入.Mat ...

  8. js 小数取整的函数

    1.丢弃小数部分,保留整数部分 js:parseInt(7/2) 2.向上取整,有小数就整数部分加1 js: Math.ceil(7/2) 3,四舍五入. js: Math.round(7/2) 4, ...

  9. js中取session的值

    在js中貌似不能取session的值,我在后台设置的session一直拿不到,于是用间接的方式拿到session的值. 首先在jsp中嵌入java代码,用java设置一个变量来取session值,再在 ...

随机推荐

  1. spring aop源码实现分析

    1. 先分析Advice before执行Cglib2AopProxy的intercept方法: /** * General purpose AOP callback. Used when the t ...

  2. 利用Microsoft.Office.Interop.Excel 将web页面转成PDF

    网上有很多将Web页面转成PDF的方法,还有许多收费的第三方插件.其实利用Office 自带的将EXCEL发布成PDF的功能就可以实现,如果你的需求没有多复杂,可以采用笔者的方法. 首先将web页面h ...

  3. prototype.js 和 jQuery.js中 ajax 的使用

    这次还是prototype.js 和 jQuery.js冲突的问题,前面说到过解决办法http://www.cnblogs.com/Joanna-Yan/p/4836252.html,以及上网说的大部 ...

  4. Network - SSH

    SSH(Secure Shell) https://wiki.wireshark.org/SSH   SSH 协议与OpenSSH详解 http://my.oschina.net/liting/blo ...

  5. Android Fragment完全解析

    转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/8881711 我们都知道,Android上的界面展示都是通过Activity实现的, ...

  6. 15 Best Responsive HTML5 Frameworks 2014

    Best HTML5 frameworks are most popular because with the use of these frameworks you can create websi ...

  7. Windows Azure Active Directory (3) China Azure AD增加新用户

    <Windows Azure Platform 系列文章目录> 本文介绍的是国内由世纪互联运维的China Azure. 本文是对笔者之前的文档:Windows Azure Active ...

  8. Node魔法堂:NPM入了个门

    一.前言 NPM作为Node的模块管理和发布工具,作用与Ruby的gem.Python的pypl或setuptools.PHP的pear和.Net的Nuget一样.在当前前端工程化极速狂奔的年代,即使 ...

  9. OpenJudge 2985数字组合 解析报告/DP

    2985:数字组合 总时间限制:  1000ms 内存限制:  65536kB 描述 有n个正整数,找出其中和为t(t也是正整数)的可能的组合方式.如:n=5,5个数分别为1,2,3,4,5,t=5: ...

  10. Maven提高篇系列之(三)——使用自己的Repository(Nexus)

    这是一个Maven提高篇的系列,包含有以下文章: Maven提高篇系列之(一)——多模块 vs 继承 Maven提高篇系列之(二)——配置Plugin到某个Phase(以Selenium集成测试为例) ...