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


取整问题:

  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. Yii2的深入学习--别名(Aliases)

    在之前自动加载机制的文章中,我们有提到别名,提到 getAlias 方法,大家当时可能不太清楚,这到底是什么,今天我们就来说一下别名. 别名用来表示文件路径和 URL,这样就避免了将一些文件路径.UR ...

  2. 精美素材:40个漂亮的 PSD 贴纸模板《上篇》

    贴纸经常被网页设计师用于为标注网站中的不同元素,以此吸引访客的注意.此外,使用贴纸也使网站更具吸引力.虽然设计者可以使用 Photoshop 制作贴纸,但他们也可以利用从互联网上下载现成的模板.这些模 ...

  3. linux专题一之文件归档和压缩(tar、file、zip)

     本文主要从以下几个方便来说明文件的归档和压缩,同时比较几种不同压缩方法的压缩比率及特点. 文件归档命令tar,tar.gz源码包的安装管理 创建tar包-解压-查询tar包内容 zip命令的用法 为 ...

  4. swift3.0的改变

    Swift在这2年的时间内,发展势头迅猛,在它开源后,更是如井喷一样,除了 iOS.mac 平台,还支持了 Linux. 而今年下半年, Swift 3.0 也会随之发布.https://github ...

  5. 如何提升我的HTML&CSS技术,编写有结构的代码

    前言 之前写了四篇HTML和CSS的知识点,也相当于是一个知识点汇总.有需要的可以收藏,平时开发过程中应该会遇到这些点,到时候再查看这些博客可能更容易理解.从这篇开始更多的介绍开发过程经常让人头痛的前 ...

  6. 数据结构 - Codeforces Round #353 (Div. 2) D. Tree Construction

    Tree Construction Problem's Link ------------------------------------------------------------------- ...

  7. 使用ASP.NET MVC局部视图避免JS拼接HTML,编写易于维护的HTML页面

    以前使用ASP.NET WebForm开发时,喜欢使用Repeater控件嵌套的方式开发前台页面,这样就不用JS拼接HTML或者后台拼接HTML了,写出的HTML页面美观.简捷.易于维护,由于不用JS ...

  8. Razor练习4

    今天练习Razor的逻辑处理.一般会使用下面 1. if 2. else 3. else if 4. switch 下面演示中,Insus.NET分别演示1,2, 4:xxx.cshtml代码如下: ...

  9. 【vbs】vbs写ini文件

    这两天在折腾给一个项目打安装包,第一次接触软件打包,用的Advanced Installer(以下简称AI),应该说如果安装过程没有特殊动作(常规动作指释放文件.写注册表.建快捷方式等)的话,倒挺傻瓜 ...

  10. 解决在android开发中ViewPager中Gallery无法滑动问题

    我的是在viewpager中某个fragment中有gallery... 导致无法滑动,网上找到解决方法. 自定义Gallery. 代码: import android.content.Context ...