zoukankan      html  css  js  c++  java
  • 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进制颜色值

  • 相关阅读:
    句法分析树标注集
    LaTeX入门教程(二)
    LaTeX入门教程(一)
    汉语词性对照表[北大标准/中科院标准]
    Python版C语言词法分析器
    QT5.4 计算器程序 打包&发布,解决dll的最新解决方案
    解决Android SDK Manager更新(一个更新Host的程序的原理实现和源码)
    增加个人博客地址,欢迎访问
    Matlab R2012b启动出现License Manager Error -15
    C++中二维数组的动态创建与处理
  • 原文地址:https://www.cnblogs.com/chengguanhui/p/4905334.html
Copyright © 2011-2022 走看看