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进制颜色值。
JS中取整以及随机颜色问题的更多相关文章
- JavaScript进阶(五)js中取小数整数部分函数
js中取小数整数部分函数 丢弃小数部分,保留整数部分 js:parseInt(7/2) 向上取整,有小数就整数部分加1 js: Math.ceil(7/2) 四舍五入 js: Math.round(7 ...
- js中取小数整数部分函数;取小数部分
1.丢弃小数部分,保留整数部分 parseInt(23.56); 结果:23 2.向上取整,有小数就整数部分加1 Math.ceil(23.56) 结果:24 3,四舍五入. Math.round(2 ...
- js 向上取整、向下取整、四舍五入
js 向上取整.向下取整.四舍五入 CreateTime--2018年4月14日11:31:21 Author:Marydon // 1.只保留整数部分(丢弃小数部分) parseInt(5.12 ...
- js 除法 取整
js 除法 取整 1.丢弃小数部分,保留整数部分 js:parseInt(7/2) 2.向上取整,有小数就整数部分加1 js: Math.ceil(7/2) 3,四舍五入. js: Math.roun ...
- js 小数取整,js 小数向上取整,js小数向下取整
js 小数取整,js 小数向上取整,js小数向下取整 >>>>>>>>>>>>>>>>>>& ...
- 在js中取选中的radio值
在js中取选中的radio值 <input type="radio" name="address" value="0" /> & ...
- JS 实现取整
Js 常用数值函数(Math,parseInt)取整 1.丢弃小数部分,保留整数部分parseInt(5/2) 2.向上取整,有小数就整数部分加1Math.ceil(5/2) 3,四舍五入.Mat ...
- js 小数取整的函数
1.丢弃小数部分,保留整数部分 js:parseInt(7/2) 2.向上取整,有小数就整数部分加1 js: Math.ceil(7/2) 3,四舍五入. js: Math.round(7/2) 4, ...
- js中取session的值
在js中貌似不能取session的值,我在后台设置的session一直拿不到,于是用间接的方式拿到session的值. 首先在jsp中嵌入java代码,用java设置一个变量来取session值,再在 ...
随机推荐
- MySQL5.6忘记root密码(win平台)
1.首先net stop mysql服务,并且切换到任务管理器,有与mysql有关的,最好关闭进程. 2.运行CMD命令切换到MySql安装bin目录,下面是我的mysql安装目录 cd C:\Pr ...
- 简单的小工具wordlight——让VS变量高亮起来
前段时间一直在使用matlab,今天需要使用vs2008,而用惯了matlab,习惯了其中一项选中变量高亮的设置,突然回来使用VS,感到各种不适应,顿时想到了一个词:矫情 呵呵,于是在网上找各种插件, ...
- Floyd算法(一)之 C语言详解
本章介绍弗洛伊德算法.和以往一样,本文会先对弗洛伊德算法的理论论知识进行介绍,然后给出C语言的实现.后续再分别给出C++和Java版本的实现. 目录 1. 弗洛伊德算法介绍 2. 弗洛伊德算法图解 3 ...
- 邻接矩阵有向图(一)之 C语言详解
本章介绍邻接矩阵有向图.在"图的理论基础"中已经对图进行了理论介绍,这里就不再对图的概念进行重复说明了.和以往一样,本文会先给出C语言的实现:后续再分别给出C++和Java版本的实 ...
- Java多线程系列--“基础篇”03之 Thread中start()和run()的区别
概要 Thread类包含start()和run()方法,它们的区别是什么?本章将对此作出解答.本章内容包括:start() 和 run()的区别说明start() 和 run()的区别示例start( ...
- 20个漂亮 CSS3 按钮效果及优秀的制作教程
在这篇文章中,我们编译了一组有用的 CSS3 动画按钮教程和引人注目的实验.正如我们都知道的,CSS3在网页设计方面是最重要和最关键的,可以使您的网站对访客更具吸引力和互动性.你可以学习这些教程和试验 ...
- Android Fragment完全解析
转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/8881711 我们都知道,Android上的界面展示都是通过Activity实现的, ...
- Azure操作手册集合
<Windows Azure Platform 系列文章目录> 第一篇: Azure EA Portal管理手册,主要面向Azure企业管理员,介绍- 如何将测试订阅转为 ...
- sublime Text3使用笔记
转载:http://blog.csdn.net/u012771929/article/details/30030249 目录: 1.setting 安装插件,package control ,Emme ...
- position属性absolute与relative 详解
最近一直在研究javascript脚本,熟悉DOM中CSS样式的各种定位属性,以前对这个属性不太了解,从网上找到两篇文章感觉讲得很透彻,收藏下来,唯恐忘记.一.解读absolute与relative ...