Хочу создать форму, где пользователь нажимает на нужный цвет и скрипт генерирует случайный оттенок этого цвета.
Я генерирую цвет 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;}
Выберите цвет:
Оттенок:
Комментариев нет:
Отправить комментарий