用原生JS写16进制随机颜色

  • A+
所属分类:Web前端
摘要

步骤构思: Math对象随机,转16进制字符,截取六位字符步骤构思: 数组遍历六次,Math对象随机索引,共存储六位字符


方法一

步骤构思:Math对象随机,转16进制字符,截取六位字符

    var a = Math.random(); // 调用静态对象方法抛出随机数a     console.log(a);      var b = a.toString(16); // 把a转换为16进制的字符串     console.log(b);       console.log(b.length); // 15     /* 进制的问题,为什么不是16(就像十进制为什么只有9而没有10) */      var c = b.substr(-6); // 截取字符串后六位     console.log(c);       var color = '#' + Math.random().toString(16).substr(-6); // 加上'#'串联成一行代码     console.log(color); 

方法二

步骤构思:数组遍历六次,Math对象随机索引,共存储六位字符

    var arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F'];     console.log(arr.length); // 16      function getColor() {         var str = '#';         for (var i = 1; i <= 6; i++) {             function getRandom(min, max) { // 调用静态对象Math.random(包含大小值间取一个整数)                 return Math.floor(Math.random() * (max - min + 1)) + min;             }             var num = arr[getRandom(0, arr.length - 1)]; // 把从数组中随机索引的一个字符串赋值给变量             /* 十六进制的长度为何要-1(就像十进制为什么只有9而没有10),如果超出则报underfined */             str += num;         }         return str; //遍历索引满6个字符则返回函数值     }     var color = getColor();      console.log(color.toLowerCase()); // 把字符串转为小写输出