JavaScript随机生成16进制颜色值

一、案例展示

JS代码

var color = '#'+ Math.random().toString(16).substr(2,6);

最终结果：

 

二、方法介绍

方法名	描述
Math.random（）	返回0和1之间的伪随机数，可能为0，但总是小于1，[0,1)
toString（16）	将随机数转换为16进制的字符串。
substring（2,6）	截取指定数目的字符，因为随机数大于等于0小于1，所以前两位是“0.”，故以下标2为起点开始截取。

1、随机函数：Math.random（）

Math.random（）函数返回介于0 ~ 1之间的一个随机数。可能为0，但总是小于1，[0,1)

例子代码：

//1、随机生成介于0~1的数
var num1 = Math.random();
//2、生成0~1的小数 乘于 10
var num2 = Math.random() * 10;

			
//3、丢弃小数部分,保留整数部分
var num3 = parseInt(num2);
//4、向上取整,有小数就整数部分加1 
var num4 = Math.ceil(num2);
//5、四舍五入
var num5 = Math.round(num2);
//6、向下取整 
var num6 = Math.floor(num2);

最终结果：

 

 

2、字符输出函数：object.toString(radix)

toString（）方法可把一个逻辑值或者数值等转换为字符串

类型	描述
逻辑值	booleanObject.toString() 根据 booleanObject 对象的布尔值，返回该值的字符串 "true" 或 "false"。
数值	可选。规定表示数字的基数，为2 ~ 36 之间的整数。若省略该参数，则默认使用基数 10。但是要注意，如果该参数是 10 以外的其他值，则 ECMAScript 标准允许实现返回任意值。 2 - 数字以二进制值显示 8 - 数字以八进制值显示 16 - 数字以十六进制值显示

例子代码：

var num = Math.random();
console.log("默认十进制：" + num);

var color1 = '#'+ num.toString(2).substr(2,6);
var color2 = '#'+ num.toString(8).substr(2,6);
var color3 = '#'+ num.toString(16).substr(2,6);

最终结果：

 

3、截取函数：stringObject.substr（start,length）

参数	描述
start（必需项）	指定截取的起始下标。如果值为负数，则以字符串的尾部为参考点，默认为头部。
length（可选项）	自定截取的字符个数。如果省略该参数，则返回从stringObject的截取位置到结尾的字串。

例子代码：

var num1 = Math.random().toString(16);
var num2 = num1.substr(2,6);
var num3 = num1.substr(-6);

最终结果：