Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 05.02.2017, 14:11
Аватар для Black_Star
Профессор
Отправить личное сообщение для Black_Star Посмотреть профиль Найти все сообщения от Black_Star
 
Регистрация: 11.07.2016
Сообщений: 300

Почему возвращает значения RGB каналов?
Добрый день уважаемые. Столкнулся с не пониманием почему JS возвращает значения RGB каналов хотя в CSS задаю под HSL. В целом задача состоит такая- необходимо каждые две секунды менять значения цветов у квадратов. Первый и второй блоки (столбци) квадратов должны получать +10 к hue каналу каждые две секунды ( То есть после второй секунды у классов .first_st* должны быть значения h =11 а у классов .second_st* = 21 ).
Если значения h доходят до 360 то добавляется сколько возможно а затем всё стартует с нуля. (То есть на 36 итерации у классов .first_st* должны быть значения h =1 а у классов .second_st* = 11)

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
	<style>
		.first_st1{
			fill: hsl(1, 50%, 50%);
		}
		.first_st2{
			fill: hsl(1, 70%, 40%);
		}
		.first_st3{
			fill: hsl(1, 90%, 30%);
		}

		.second_st1{
			fill: hsl(11, 50%, 50%);
		}
		.second_st2{
			fill: hsl(11, 70%, 40%);
		}
		.second_st3{
			fill: hsl(11, 90%, 30%);
		}
	</style>
</head>
<body>
	<svg width="600" height="240">
		<rect class="first_st1" width="80" height="80" x="0" y="0"></rect>
		<rect class="first_st2" width="80" height="80" x="0" y="80"></rect>
		<rect class="first_st3" width="80" height="80" x="0" y="160"></rect>

		<rect class="second_st1" width="80" height="80" x="160" y="0"></rect>
		<rect class="second_st2" width="80" height="80" x="160" y="80"></rect>
		<rect class="second_st3" width="80" height="80" x="160" y="160"></rect>
	</svg>
<script>
window.onload = function(){

	var allFirstColors = $("[class^='first_st']"),
		firstColorsLength = allFirstColors.length,

		allSecondColors = $("[class^='second_st']"),
		secondColorsLength = allFirstColors.length;

	var h,s,l;

		console.log(" st1 = " + $(".first_st1").css("fill") ); // Почему возвращает RGB каналы? 

		allFirstColors.each(function(indx, el){
				let  color = $(el).css("fill"),
				[h,s,l] = color.match(/\d+/g);
	console.log("[h,s,l] = " + [h,s,l]);
		});	

}
</script>
</body>
</html>
Ответить с цитированием
  #2 (permalink)  
Старый 05.02.2017, 15:04
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,374

Сообщение от Black_Star
Почему возвращает RGB каналы?
это же замечательно, раньше каждый браузер сам решал что ему возвращать. прими как особенность.
Ответить с цитированием
  #3 (permalink)  
Старый 05.02.2017, 15:19
Аватар для Black_Star
Профессор
Отправить личное сообщение для Black_Star Посмотреть профиль Найти все сообщения от Black_Star
 
Регистрация: 11.07.2016
Сообщений: 300

Я хочу то что положено стилями в css файле. Так не честно
Ответить с цитированием
  #4 (permalink)  
Старый 05.02.2017, 15:20
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,374

Black_Star,
так правила css и фильтруй тоже самое похоже RGB, только ie сохраняет формат

Последний раз редактировалось рони, 05.02.2017 в 15:35.
Ответить с цитированием
  #5 (permalink)  
Старый 05.02.2017, 17:04
Аватар для Black_Star
Профессор
Отправить личное сообщение для Black_Star Посмотреть профиль Найти все сообщения от Black_Star
 
Регистрация: 11.07.2016
Сообщений: 300

А возможно ли гнать это все дело через data тэги ? Что-то по типу такого ?
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>
	<svg width="600" height="240">
		<rect class="first_st1" data-hsl="(1, 50%, 50%)" width="80" height="80" x="0" y="0"></rect>
		<rect class="first_st2" data-hsl="(1, 70%, 40%)" width="80" height="80" x="0" y="80"></rect>
		<rect class="first_st3" data-hsl="(1, 90%, 30%)" width="80" height="80" x="0" y="160"></rect>

		<rect class="second_st1" data-hsl="(11, 50%, 50%)" width="80" height="80" x="160" y="0"></rect>
		<rect class="second_st2" data-hsl="(11, 70%, 40%)" width="80" height="80" x="160" y="80"></rect>
		<rect class="second_st3" data-hsl="(11, 90%, 30%)" width="80" height="80" x="160" y="160"></rect>
	</svg>
<script>
window.onload = function(){

	var allFirstColors = $("[class^='first_st']"),
		firstColorsLength = allFirstColors.length,

		allSecondColors = $("[class^='second_st']"),
		secondColorsLength = allFirstColors.length;

	var h,s,l;

		allFirstColors.each(function(indx, el){
		
		let  color = $(el).data("hsl");

		$(el).data("hsl", h+', '+s+', '+l);

		console.log("color = " + color );

		});	
}

</script>
</body>
</html>
Ответить с цитированием
  #6 (permalink)  
Старый 05.02.2017, 17:08
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Если так принципиально, используйте конвертор для вычислений.
Ответить с цитированием
  #7 (permalink)  
Старый 05.02.2017, 17:45
Аватар для destus
Профессор
Отправить личное сообщение для destus Посмотреть профиль Найти все сообщения от destus
 
Регистрация: 18.05.2011
Сообщений: 1,207

Black_Star,
Зачем все эти танцы с атрибутами data? Начальное состояние блоков известно же, для остальных двух параметров явно прослеживается зависимость блока от индекса. Да и конверторы никакие не нужны.
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
	<style>
		.first_st1{
			fill: hsl(1, 50%, 50%);
		}
		.first_st2{
			fill: hsl(1, 70%, 40%);
		}
		.first_st3{
			fill: hsl(1, 90%, 30%);
		}

		.second_st1{
			fill: hsl(11, 50%, 50%);
		}
		.second_st2{
			fill: hsl(11, 70%, 40%);
		}
		.second_st3{
			fill: hsl(11, 90%, 30%);
		}
	</style>
</head>
<body>
	<svg width="600" height="240">
		<rect class="first_st1" width="80" height="80" x="0" y="0"></rect>
		<rect class="first_st2" width="80" height="80" x="0" y="80"></rect>
		<rect class="first_st3" width="80" height="80" x="0" y="160"></rect>

		<rect class="second_st1" width="80" height="80" x="160" y="0"></rect>
		<rect class="second_st2" width="80" height="80" x="160" y="80"></rect>
		<rect class="second_st3" width="80" height="80" x="160" y="160"></rect>
	</svg>
<script>

window.onload = function(){

	var initialH1 = 1
		initialH2 = 11,	
		allFirstColors = $("[class^='first_st']"),
		firstColorsLength = allFirstColors.length,
		allSecondColors = $("[class^='second_st']"),
		secondColorsLength = allFirstColors.length;
		
	window.setInterval(function(){

		initialH1 = initialH1 === 360 ? 1 : initialH1 + 10 < 360 ? initialH1 + 10 : 360;
		initialH2 = initialH2 === 360 ? 11 : initialH2 + 10 < 360 ? initialH2 + 10 : 360;
		
		allFirstColors.each(function(i){
			$(this).css("fill", `hsl(${initialH1}, ${50 + i * 20}%, ${50 - i * 10}%)`); 
		})
		
		allSecondColors.each(function(i){
			$(this).css("fill", `hsl(${initialH2}, ${50 + i * 20}%, ${50 - i * 10}%)`); 
		})
		
	}, 200)	
}
</script>
</body>
</html>

Последний раз редактировалось destus, 05.02.2017 в 17:47.
Ответить с цитированием
  #8 (permalink)  
Старый 05.02.2017, 18:07
Аватар для Black_Star
Профессор
Отправить личное сообщение для Black_Star Посмотреть профиль Найти все сообщения от Black_Star
 
Регистрация: 11.07.2016
Сообщений: 300

Это всё замечательно, но оно работает не правильно.
Как бы вообще условия не соблюдаются.
1) Цветовые каналы первой колонки блоков на второй итерации должны отвечать цветовым каналам второй колонки блоков что значит:
.first_st1{fill: hsl(1, 50%, 50%); должен стать fill: hsl(11, 50%, 50%);}
.first_st2{fill: hsl(1, 70%, 40%); должен стать fill: hsl(11, 70%, 40%);}
.first_st3{ fill: hsl(1, 90%, 30%); должен стать fill: hsl(11, 90%, 30%);}
Соответственно для второй колонки блоков
.second_st1{fill: hsl(11, 50%, 50%); должен стать fill: hsl(21, 50%, 50%);}
.second_st2{fill: hsl(11, 70%, 40%); должен стать fill: hsl(21, 70%, 40%);}
.second_st3{ fill: hsl(11, 90%, 30%); должен стать fill: hsl(21, 90%, 30%);}
И так далие на каждой итерации...(когда значение h канала становиться >360 то прибавляется сколько возможно а остаток прибавляет к нулю) надеюсь так стало понятнее.
(Цифры 1 и 11 взяты для наглядности, на самом деле там в 3 квадратах совершенно разные цифры для h канала)
Ваш вариант выдает совершенно сказочные вещи если смотреть в консоль
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <style>
        .first_st1{
            fill: hsl(1, 50%, 50%);
        }
        .first_st2{
            fill: hsl(1, 70%, 40%);
        }
        .first_st3{
            fill: hsl(1, 90%, 30%);
        }
 
        .second_st1{
            fill: hsl(11, 50%, 50%);
        }
        .second_st2{
            fill: hsl(11, 70%, 40%);
        }
        .second_st3{
            fill: hsl(11, 90%, 30%);
        }
    </style>
</head>
<body>
    <svg width="600" height="240">
        <rect class="first_st1" width="80" height="80" x="0" y="0"></rect>
        <rect class="first_st2" width="80" height="80" x="0" y="80"></rect>
        <rect class="first_st3" width="80" height="80" x="0" y="160"></rect>
 
        <rect class="second_st1" width="80" height="80" x="160" y="0"></rect>
        <rect class="second_st2" width="80" height="80" x="160" y="80"></rect>
        <rect class="second_st3" width="80" height="80" x="160" y="160"></rect>
    </svg>
<script>
 
window.onload = function(){
 
    var initialH1 = 1
        initialH2 = 11,
        allFirstColors = $("[class^='first_st']"),
        firstColorsLength = allFirstColors.length,
        allSecondColors = $("[class^='second_st']"),
        secondColorsLength = allFirstColors.length;
         
    window.setInterval(function(){
 
        initialH1 = initialH1 === 360 ? 1 : initialH1 + 10 < 360 ? initialH1 + 10 : 360;
        initialH2 = initialH2 === 360 ? 11 : initialH2 + 20 < 360 ? initialH2 + 20 : 360;
         
        allFirstColors.each(function(i){
            $(this).css("fill", `hsl(${initialH1}, ${50 + i * 20}%, ${50 - i * 10}%)`);

            console.log( $(this).css("fill") + " = first block" )
        })
         
        allSecondColors.each(function(i){
            $(this).css("fill", `hsl(${initialH2}, ${50 + i * 20}%, ${50 - i * 10}%)`);

            console.log( $(this).css("fill") + " = second block" )

        })
         
    }, 2000)
}
</script>
</body>
</html>
Ответить с цитированием
  #9 (permalink)  
Старый 05.02.2017, 18:20
Аватар для destus
Профессор
Отправить личное сообщение для destus Посмотреть профиль Найти все сообщения от destus
 
Регистрация: 18.05.2011
Сообщений: 1,207

Black_Star,
Цитата:
console.log( $(this).css("fill") + " = first block" )
Ты о чем вообще? Непонятно как ты цифры проверяешь. Ты же сам писал, что возвращается rgb, вот он тебе и вернулся. .

Смысл в том, что на каждом интвервале, ты устанавливаешь fill в формате hsl, а браузер внутри себя это приводит к rgb и отрисовывает.
Ответить с цитированием
  #10 (permalink)  
Старый 05.02.2017, 18:31
Аватар для Black_Star
Профессор
Отправить личное сообщение для Black_Star Посмотреть профиль Найти все сообщения от Black_Star
 
Регистрация: 11.07.2016
Сообщений: 300

Так ведь RGB тоже должны совпадать. 1->2 2->3; 2->3 3->4.... Система то не меняется. Я наглядно вижу что первые блоки не переходят в значения вторих на следующей итерации
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Input type="time" + JS +Safari (iPhone) dpts Opera, Safari и др. 0 21.09.2016 08:24
Почему не изменяется слайд при изменении значения в скоупе Casufi Angular.js 1 25.05.2016 17:41
Почему ошибка при возвращении значения? Валерий1996 Общие вопросы Javascript 4 08.09.2015 14:46
Почему некоторые операторы возвращают значения, а не ссылки? dump Общие вопросы Javascript 15 25.07.2012 17:28
Почему значения св-в undefined? Bakuryu Events/DOM/Window 4 18.07.2008 19:49