Страницы

Поиск по вопросам

вторник, 12 февраля 2019 г.

Рандомный оттенок

Хочу создать форму, где пользователь нажимает на нужный цвет и скрипт генерирует случайный оттенок этого цвета.
Я генерирую цвет rgb с помощью random. Но я не могу Придумать, как сделать, что бы генерировался именно оттенок цвета, а не случайный цвет
$(function() { $('#color').change(function() { var min = 0, max = 255; var rgbColor = 'rgb('+(Math.floor(Math.random() * (max - min)) + min)+','+(Math.floor(Math.random() * (max - min)) + min)+','+(Math.floor(Math.random() * (max - min)) + min)+')'; $('#shade').val(rgbColor).css('border-color', rgbColor); }); }); #shade {border: 2px solid #000;}

Выберите цвет:

Оттенок:


Как сделать, что бы генерировался оттенок?


Ответ

Нужно записывать кода всех оттенков нужных
$(function() { $('#color').change(function() { var self = this, // Создаём список цветов colorsModels = { 'red': {'r': '50-255', 'g': '0', 'b': '0'}, 'green': {'r': '0', 'g': '50-255', 'b': '0'}, 'yellow': {'r': '50-255', 'g': 'r', 'b': '0'}, 'blue': {'r': '0', 'g': '0', 'b': '50-255'}, 'grey': {'r': '50-200', 'g': 'r', 'b': 'r'} }; // Проверяем, существует ли цвет указанный в списке if( colorsModels[self.value] !== undefined ){ // Передаём массив цвета в переменную и создаём rgb var model = colorsModels[self.value], rgb = {r: null, g: null, b: null}; // Перебираем каждый цвет из массива for(var key in model){ if( /\d{1,3}\-\d{1,3}/.exec(model[key]) ){ // Проверяем, указано ли значение диапазоном // Вычисляем минимум и максимум с диапазона var min = parseFloat( model[key].replace(/(\d{1,3})\-\d{1,3}/, '$1') ), max = parseFloat( model[key].replace(/\d{1,3}\-(\d{1,3})/, '$1') ); // Вычисляем рандомное число в этом диапазоне var value = Math.floor(Math.random() * (max - min)) + min; // Применяем значение rgb[key] = value; }else if( /\d{1,3}/.exec(model[key]) ){ // Если цвет указан не диапазоном, то проверяем, цифра ли это // Преобразовываем значение в цифру var value = parseFloat( model[key] ); // Применяем значение rgb[key] = value; }else if( model[key] === 'r' || model[key] === 'g' || model[key] === 'b' ){ // Проверяем, ну казано ли значение повторяющим цветом (не равно ли значение пердыдущим цветам) // Проверяем, на допустимость повторения if( (key !== 'r' && key !== model[key]) || (model[key] === 'g' && key !== 'r') ){ // Если всё нормально, то копируем значение rgb[key] = rgb[model[key]]; }else{ console.error('Invalid!'); }; }else{ console.error('Undefined a value color!'); }; }; // Устанавливаем значение var rgbColor = 'rgb('+rgb['r']+','+rgb['g']+','+rgb['b']+')'; $('#shade').val(rgbColor).css('border-color', rgbColor); }else{ console.error('Undefined a color!'); }; }); }); #shade {border: 2px solid #000;}

Выберите цвет:

Оттенок:


Комментариев нет:

Отправить комментарий