случайный цвет JavaScript с 7 цифрами должен

Question

Эй, ребята, я нашел следующий удивительный скрипт для создания случайного цвета с помощью JavaScript.

var randColor = '#'+(Math.random()*0xFFFFFF<<0).toString(16);

Единственная проблема, которая возникает у меня с этим сценарием, заключается в том, что он не гарантирует, что он возвращает нормальную 7-значную шестнадцатеричную строку.

иногда это всего 6 цифр, как # e1d19.

есть ли способ заставить 7-значное шестнадцатеричное значение?

спасибо за вашу помощь.

изменить: это моя актуальная проблема:

function randColor() {
    var randColor = '#'+(Math.random()*0xFFFFFF<<0).toString(16);
    return randColor;
}

for (var i=0; i<100; i++) {
    $("#colorpicker").append("<div class='color' title="+randColor()+" style='background:"+randColor()+"'></div>");
}

Я создаю маленькие div со случайным цветом, когда я нажимаю на них, я беру их атрибут заголовка и окрашиваю фон моего тела.

однако в настоящее время мой код заканчивается на

<div style="background:rgb(176, 249, 252);" title="#8bc47d" class="color"></div>

поэтому, когда я беру атрибут заголовка, цвет, который я даю моему телу, отличается от цвета, который показывает маленький div.

Answer 1

Вы можете просто дополнить это самостоятельно:

function randomColor() {
  var rc = (~~(Math.random() * 0xFFFFFF)).toString(16);
  return '#' + new Array(7 - rc.length).join('0') + rc;
}

Этот трюк:

new Array(n).join(char)

- это способ получить n - 1 копий "char" в строке. Я вычел необработанную длину значения из 7 вместо 6, чтобы при длине строки 5 символов я получал один ноль, когда 4 - два и т. Д.

edit & mdash; конечно (как уже упоминалось в других ответах) вы можете получить нули пэда, например, так:

  return '#' + "000000".slice(rc.length) + rc;

Мне бы пришлось сделать одну из тех глупых вещей jsperf, чтобы увидеть, что быстрее: -)

Answer 2

var randColor = '#'+(0xFFFFFFFF-Math.random()*0xFFFFFFFF).toString(16).substr(0, 6);

Answer 3

Вы хотите, чтобы это было шесть цифр, а не семь, но результирующая строка должна иметь длину семь символов, включая хеш. Придираюсь, знаю, но все же. Как насчет этого:

var color = (Math.random() * 0xFFFFFF << 0).toString(16);
"#" + String(color + "000000").slice(0, 6);

Если вместо этого вы хотите добавить пэд в начале, это должно быть сделано:

var color = (Math.random() * 0xFFFFFF << 0).toString(16);
"#" + String("000000" + color).slice(-6);

Для пояснения, это будет заполнять строку целом , а не отдельные каналы. Я думаю, что поскольку вы не рандомизируете по каждому каналу, на самом деле есть только красный или синий канал, который вы хотите заполнить (вероятно, красный, т.е. второй фрагмент).

Ваша вторая проблема в том, что вы дважды вызываете randColor, давая вам два разных цвета. Вы захотите сохранить сгенерированный цвет в переменной и использовать переменную дважды.

for (var i=0; i<100; i++) {
    var color = randColor();
    $("#colorpicker").append("<div class='color' title=" + color + " style='background:" + color + "'></div>");
}

Answer 4

Я думаю, что вам лучше всего сделать 3 набора двузначных шестнадцатеричных чисел (по одному для каждого R, G и B).Затем просто вставьте влево каждый с 0, чтобы убедиться, что все они состоят из двух цифр.Может быть, что-то вроде этого непроверенного кода, который я предоставляю для справки:)

//I am GUESSING that this is how you get a 2-digit hex value ranging 0-255
var r = PadDigits(Math.random()*0xFF<<0).toString(16),2);
var g = PadDigits(Math.random()*0xFF<<0).toString(16),2);
var b = PadDigits(Math.random()*0xFF<<0).toString(16),2);

var randColor = '#'+r+g+b;

function PadDigits(n, totalDigits) 
{ 
    n = n.toString(); 
    var pd = ''; 
    if (totalDigits > n.length) 
    { 
        for (i=0; i < (totalDigits-n.length); i++) 
        { 
            pd += '0'; 
        } 
    } 
    return pd + n.toString(); 
} 

Answer 5

Вот моя (низкотехнологичная) попытка:

var randColor = (Math.random()*0xFFFFFF<<0).toString(16);
while( randColor.length < 6 ) {
    randColor = '0' + randColor;
}
randColor = '#' + randColor;

Answer 6

Никто не опубликовал это, и это самый короткий код, который я получил, чтобы получить случайный цвет.

'#'+Math.random().toString(16).slice(-6)

• Получит случайное число с плавающей запятой 0.437920 ...
• Конвертируйте его в шестнадцатеричный код, вы получите что-то подобное 0.7c13b41830e33
• Возьмите 6 последних символов, которые дадут вам случайный цвет #

Легко понять, коротко и эффективно.