Перемешать цвета в скрипте - PullRequest
Новая
       7

Перемешать цвета в скрипте

1 голос
/ 12 июля 2020

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

var contents=new Array()
contents[0]='0'
contents[1]='1'
contents[2]='2'
contents[3]='3'
contents[4]='4'
contents[5]='5'
contents[6]='6'
contents[7]='7'
contents[8]='8'
contents[9]='9'
contents[10]='10'
contents[11]='11'
contents[12]='12'
contents[13]='13'
contents[14]='14'
contents[15]='15'
contents[16]='16'
contents[17]='17'
contents[18]='18'
contents[19]='19'
contents[20]='20'

var spacing="<br />"

var the_one
var z=0

while (z<contents.length){
the_one=Math.floor(Math.random()*contents.length)
if (contents[the_one]!="_selected!"){
document.write(contents[the_one]+spacing)
contents[the_one]="_selected!"
z++
}
}

Ответы [ 2 ]

0 голосов
/ 13 июля 2020

Изменить: перечитайте вопрос, и у него были другие потребности. Но я оставлю этот ответ здесь, поскольку он объясняет, как получить рандомизированные цвета (фактическое значение c) в JavaScript.

Вот функции, которые вам понадобятся для создания случайных шестнадцатеричных значений цвета : 

const getRandomHex = () => Math.floor(Math.random() * 256).toString(16).padStart(2, '0');

const getRandomRGB = ({R = getRandomHex(), G = getRandomHex(), B = getRandomHex(), A } = {}) => ['#', R, G, B, A].join('');

console.log(getRandomRGB());
console.log(getRandomRGB({ A: '00' }));

Первая функция getRandomHex преобразует случайное (0-255) числовое c значение как Base16 или шестнадцатеричную строку. И, если необходимо, добавляет впереди дополнительный ноль.

Основная функция getRandomRGB добавит три (красный, зеленый, синий) значения в массив, а затем присоединится к массиву как одна строка.

Кроме того, вы можете переопределить значения R / G / B (и альфа-канала) как переданные свойства.

Я выбрал этот подход просто потому, что он позволяет манипулировать сгенерированными значениями R / G / B, если необходимо (например, в случае использования: «сохранить 'красное значение' stati c - в то время как зеленые и синие значения рандомизированы»).

0 голосов
/ 13 июля 2020

Настройте следующим образом: 

 const c = [1,2,3].map(ele => Math.floor(Math.random() * 216)); 
 document.write(`<span style="color: rgb(${c.join(",")});">${contents[the_one]+spacing}<span>`);

См. Пример: 

var contents = new Array()
contents[0] = '0'
contents[1] = '1'
contents[2] = '2'
contents[3] = '3'
contents[4] = '4'
contents[5] = '5'
contents[6] = '6'
contents[7] = '7'
contents[8] = '8'
contents[9] = '9'
contents[10] = '10'
contents[11] = '11'
contents[12] = '12'
contents[13] = '13'
contents[14] = '14'
contents[15] = '15'
contents[16] = '16'
contents[17] = '17'
contents[18] = '18'
contents[19] = '19'
contents[20] = '20'

var spacing = "<br />"

var the_one
var z = 0

while (z < contents.length) {
  the_one = Math.floor(Math.random() * contents.length)
  if (contents[the_one] != "_selected!") {
    const c = [1,2,3].map(ele => Math.floor(Math.random() * 216)); 
    document.write(`<span style="color: rgb(${c.join(",")});">${contents[the_one]+spacing}<span>`);
    contents[the_one] = "_selected!"
    z++
  }
}
...