legend2---js生成随机16进制颜色

legend2---js生成随机16进制颜色

一、总结

一句话总结：

还是要【一位一位】生成16进制颜色比较方便，如果两位一起，就会导致【颜色少位】情况，比如#5e1a3

【for i...0->5; '#'+=Math.floor(Math.random()*(n_max-n_min+1)+n_min).toString(16)】

//随机生成颜色：十六进制颜色随机
//生成n_min->n_max的颜色，范围是0->15，颜色值最大取f就是15
function random_color16(n_min,n_max){
    let str='#';
    for(let i=0;i<6;i++){
        let per_10=Math.floor(Math.random()*(n_max-n_min+1)+n_min);
        //per_10的取值不能是16，因为16会被转换成10
        let per_16=per_10.toString(16);
        str+=per_16;
    }
    return str;
}

 

 

1、js如何生成[n,m]的随机数？

【Math.random()生成[0,1)】的数，所以【Math.random()*5生成{0,5)】的数。

【Math.floor(Math.random()*(max-min+1)+min);】

 

 

二、js生成随机16进制颜色

博客对应课程的视频位置：

 

1、基础知识

Math.random()生成[0,1)的数，所以
Math.random()*5生成{0,5)的数。

 

js如何生成[n,m]的随机数

Math.floor(Math.random()*(max-min+1)+min);

 

2、不好的方案

//随机生成颜色：十六进制颜色随机，不能是白色
function random_color16(){
    //let r = Math.floor(Math.random()*256);
    let r = Math.floor(Math.random()*200);
    let g = Math.floor(Math.random()*200);
    let b = Math.floor(Math.random()*200);
    let color1 = '#'+r.toString(16)+g.toString(16)+b.toString(16);
    return color1;
}

这样有问题，会生成 #5e1e3 这样的颜色，这不行

 

3、较优方案

//随机生成颜色：十六进制颜色随机
//生成n_min->n_max的颜色，范围是0->15，颜色值最大取f就是15
function random_color16(n_min,n_max){
    let str='#';
    for(let i=0;i<6;i++){
        let per_10=Math.floor(Math.random()*(n_max-n_min+1)+n_min);
        //per_10的取值不能是16，因为16会被转换成10
        let per_16=per_10.toString(16);
        str+=per_16;
    }
    return str;
}

比如random_color16(1,12)