JS

[guzel8]

Доброго времени суток!Дали задание,а я js только начала изучать...Помогите,пож-та,разобрать код

<script>
	var color = ['1b737d', 'be3434'];

	function hex2dec(rgb) {
		rgb = parseInt(rgb, 16);
		return [rgb>>16, (rgb&0xFF00)>>8, rgb&0xFF];
	}

	function getColor(color1, color2, i, n) {
		a1 = hex2dec(color1);
		a2 = hex2dec(color2);

		color_ar = [];
		for (var r=0; r<3; r++) {
			color_ar[r] = Math.round(a1[r] + (a2[r] - a1[r])*i/n).toString(16);
			color_ar[r] = color_ar[r].length == 1 ? '0' + color_ar[r] : color_ar[r];
		}

		return '#' + color_ar[0] + color_ar[1] + color_ar[2];
	}

	var str = '';
	var str_ar = $(".gradient").text().split('');

	var l = str_ar.length;
	for (var i=0; i<="" span="">';

	$(".gradient").html(str);
	$(".gradient SPAN").each(function(index) {
		$(this).css("color", getColor(color[0], color[1], index, l));
	});
</script>

Нужно:

разобраться, зачем он нужен

оформить этот код в виде плагина к jQuery

добавить возможность указывать для массива color любое количество элементов (а не два, как в приведенном коде).

Edited April 13, 2012 by rus
Для оформления кода используйте BB теги форума.

[Switch74]

берем все элементы с классом gradient

разбиваем текст находящийся в каждом элементе на буковки

var str_ar = $(".gradient").text().split('');

подсчитываем их

var l = str_ar.length;

а вот тут начинаются непонятки для меня

for (var i=0; i<="" span="">';

i = от 0 и до ... пустой строки!? обычно счетчик - это число а числа и строки это разные вещи, дальше какой-то span="", нет закрывающей скобки... в общем на этой части кода скрипт должен сделать харакири, нужно его исправить как-то.

function getColor(color1, color2, i, n) - получает цвета из массива color и возвращает готовый, как я понимаю промежуточный исходя из количества символов и чего-то ещё, но тут я пока сильно не разбирался.

function hex2dec(rgb) - переводит цвет вида '1b737d' в 27 115 125

чтобы оформить все это в виде jquery плагина и добавить как отдельную команду я обычно делаю так:

предположим этот плагин должен делать градиент, по этому мы назовем эту функцию gradient

jQuery.fn.extend(
{
   gradient:function()
   {
//сюда нужно будет вставить ваш код, только его нужно будет подготовить для данного действия
   }
});

теперь вызвав $('.gradient').gradient();

для всех элементов с class=gradient у вас будет выполняться функции gradient

[guzel8]

а вот тут начинаются непонятки для меня

for (var i=0; i<="" span="">';

i = от 0 и до ... пустой строки!? обычно счетчик - это число а числа и строки это разные вещи, дальше какой-то span="", нет закрывающей скобки... в общем на этой части кода скрипт должен сделать харакири, нужно его исправить как-то.

Почему-то при скопировании добавляется

<="" span="">

А в задании написано так:

for (var i=0; i';

все равно не то ...

[Switch74]

угу там должно быть что-то вроде

for (var i=0; i<=l; i++)

но не факт, это я сам так додумал

[guzel8]

угу там должно быть что-то вроде

for (var i=0; i<=l; i++)

но не факт, это я сам так додумал

Так и есть.Задание исправили

<script>
	var color = ['1b737d', 'be3434'];

	function hex2dec(rgb) {
		rgb = parseInt(rgb, 16);
		return [rgb>>16, (rgb&0xFF00)>>8, rgb&0xFF];
	}

	function getColor(color1, color2, i, n) {
		a1 = hex2dec(color1);
		a2 = hex2dec(color2);

		color_ar = [];
		for (var r=0; r<3; r++) {
			color_ar[r] = Math.round(a1[r] + (a2[r] - a1[r])*i/n).toString(16);
			color_ar[r] = color_ar[r].length == 1 ? '0' + color_ar[r] : color_ar[r];
		}

		return '#' + color_ar[0] + color_ar[1] + color_ar[2];
	}

	var str = '';
	var str_ar = $(".gradient").text().split('');

	var l = str_ar.length;
	for (var i=0; i<l; i++)
		str += '<span>' + str_ar[i] + '</span>';

	$(".gradient").html(str);
	$(".gradient SPAN").each(function(index) {
		$(this).css("color", getColor(color[0], color[1], index, l));
	});
</script>

Edited April 19, 2012 by guzel8