Javascript-форум - Перебежка по буквам.

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Перебежка по буквам. (https://javascript.ru/forum/misc/24523-perebezhka-po-bukvam.html)

art13

04.01.2012 13:07

Перебежка по буквам.

Задача: есть слово, нужно что бы оно при клике, начиная с последней буквы переместилось вправо. По одной букве.
Все слово я заставил это сделать. И понимаю, что бы выдернуть букву нужен доступ к символам charAt(0);.

<html>
<head>
</head>
<body>
<div id="t" style="position: absolute">слово</div>
<script>
var obj=document.getElementById("t");
var x=0;
function move()
{
	if(x<100)
        {
            x=x+1;
            s=x+"px";
            obj.style.left=s;
        }
}
	
    setInterval("move()",7);
</script>
</body>
</html>

Здесь пока работает при загрузке документа)))
Читал про строки, но как использовать один символ из строки, обработать его и с новыми значениями позиции вернуть, так и не допер.

Aetae

04.01.2012 13:45

setInterval("move()",7) e dас будет выполнятся бесконечно, хотя надобности в нём уже никакой не будет.

А по проблеме: обернуть каждую букву в span.

или так:)

<span onclick="setInterval(function(){innerHTML=innerHTML.slice(1)+innerHTML.charAt(0)},100)"> слово </span>

art13

11.01.2012 10:07

Вот что получилось.

<html>
<head>
</head>
<body>
<span id="a" style="position: relative">с</span><span id="b" style="position: relative">с</span><span id="c" style="position: relative">ы</span><span id="d" style="position: relative">л</span><span id="e" style="position: relative">к</span><span id="f" style="position: relative" onClick="move()">а</span>
<script>
var obj = document.getElementById("f");
    var x = 10;
    function move()
    {
		if(x < 100)
        {
            x = x + 1;
            s = x + "px";
            obj.style.left = s;
			setInterval("move()", 300);
        }        
    }
</script>
</body>
</html>

Теперь ломаю голову как передвигаться по ID элементов. Допустим можно загнать ABCDEF в массив и присваивать эти значения переменной, которая в свою очередь будет подставляться в строку создания obj. Но! Символы ведь не цифры. Как их присвоить переменной? И Будет ли

Код:

var obj = document.getElementById("f");

это выражение работать с переменной? Или...?

art13

11.01.2012 12:51

Дошел я до такого нагромождения. С моими представлениями о JS должно работать. Но! Вообще не работает. Либо синтаксическая ошибка либо я просто чего не знаю. Все операции вроде простые. Дорогие гуру, подскажите.

<html>
<head>
</head>
<body>
<span id="a" style="position: relative">с</span><span id="b" style="position: relative">с</span><span id="c" style="position: relative">ы</span><span id="d" style="position: relative">л</span><span id="e" style="position: relative">к</span><span id="f" style="position: relative" onClick="move()">а</span>
<script>
var obj;
var i;
function move()
{
for (i = 0; i < 7; i++)
{
	switch(i)
	{
		case 0: obj = document.getElementById("a");
		break;
		case 1: obj = document.getElementById("b");
		break;
		case 2: obj = document.getElementById("c");
		break;
		case 3: obj = document.getElementById("d");
		break;
		case 4: obj = document.getElementById("e");
		break;
		case 5: obj = document.getElementById("f");
		break;
	}
	var x;
    function mov()
    {
		if(x < 100)
        {
            x = x + 2;
            s = x + "px";
            obj.style.left = s;
			setInterval("mov()", 100);
        }       
    }
}
}
</script>
</body>
</html>

trikadin

11.01.2012 14:33

Перепишите, это неправильно)

art13

11.01.2012 19:57

Цитата:

Сообщение от trikadin (Сообщение 149563)

Перепишите, это неправильно)

Большое, блин спасибо!
Может кто то другой окажется компетентнее предыдущего оратора?
Я не прошу за меня писать код. Укажите ошибки, где несостыковки в коде?
Нельзя switch заталкивать в функцию? Я неправильно вызываю функцию? Или с переменными накосячил?

Aetae

11.01.2012 20:07

http://javascript.ru/blog/Andrej-Par...cii-JavaScript

art13

11.01.2012 20:21

Цитата:

Сообщение от Aetae (Сообщение 149667)

http://javascript.ru/blog/Andrej-Par...cii-JavaScript

Рёхнуться можно. Это типа я лох. Ладно, почитаю.

Livaanderiamarum

11.01.2012 20:22

Цитата:

Сообщение от art13 (Сообщение 149670)

Рёхнуться можно. Это типа я лох. Ладно, почитаю.

Доставил:)

trikadin

12.01.2012 00:22

art13, не поймите меня неправильно, но ваш код не очень)

Вы правильно использовали switch, но в том месте, где его использование абсолютно неоправданно. Более того - использование здесь идентификаторов абсолютно неоправданно. Просто получайте внутри тега-родителя все спаны через parent.getElementsByTagName.

Дальше массивом перебирайте их и ставьте нужные св-ва. Много ответов на свои вопросы вы так же найдёте в этой статье.

Кстати - ставьте один интервал для всех элементов, а не для каждого отдельного.

Livaanderiamarum

12.01.2012 00:29

Цитата:

Сообщение от trikadin

Кстати - ставьте один интервал для всех элементов, а не для каждого отдельного.

Девяносто пятая винда и второй цемпрон научат его оптимизации XD!!!

trikadin

12.01.2012 00:33

Цитата:

Сообщение от Livaanderiamarum

Девяносто пятая винда и второй цемпрон научат его оптимизации XD!!!

Время научит, дай бог...

art13

12.01.2012 10:13

Код тяжелый это я знаю. Если бы оно заработало, то уже бы было интересно. Спасибо всем, буду учиться дальше.

art13

12.01.2012 12:03

Цитата:

Сообщение от Livaanderiamarum (Сообщение 149751)

Девяносто пятая винда и второй цемпрон научат его оптимизации XD!!!

Цемпронов не было. Был целер(интел) и семп(амд).

розовый слоник

12.01.2012 18:51

разбераться лень но сразу глаз режет то что у вас var i; фиг знает где объявленно, при втором запуске вашей функции i будет равно 6, дальше ищите сами))

art13

18.01.2012 11:14

Мне предложили такой вариант. Не уверен что это работает быстро на слабеньких компах.

<html>
<head>
<title></title>
</head>
<body>
<script> 
var mPos = 0;
var cPos = 0;
var bukva;
var step=0;
function moveB()
{
var a;
setTimeout("myBuk = document.getElementById('a1'); mPos = 300; bokMove(myBuk);",75000);
setTimeout("myBuk = document.getElementById('a2'); mPos = 310; bokMove(myBuk);",60000);
setTimeout("myBuk = document.getElementById('a3'); mPos = 320; bokMove(myBuk);",45000);
setTimeout("myBuk = document.getElementById('a4'); mPos = 330; bokMove(myBuk);",30000);
setTimeout("myBuk = document.getElementById('a5'); mPos = 340; bokMove(myBuk);",15000);
var myBuk = document.getElementById("a6"); mPos = 350; bokMove(myBuk);
}
function bokMove(wrBuk)
{
bukva = wrBuk
cPos = parseInt(bukva.style.left);
step = setInterval("dvig();",40);
}
function dvig()
{
cPos++;
if(cPos < mPos) bukva.style.left = cPos + "px";
else clearInterval(step);
}
</script>
<span id="a1" style="position:absolute; left:15px;" onclick="moveB()">c</span>
<span id="a2" style="position:absolute; left:25px;" onclick="moveB()">c</span>
<span id="a3" style="position:absolute; left:35px;" onclick="moveB()">ы</span>
<span id="a4" style="position:absolute; left:45px;" onclick="moveB()">л</span>
<span id="a5" style="position:absolute; left:55px;" onclick="moveB()">к</span>
<span id="a6" style="position:absolute; left:65px;" onclick="moveB()">а</span>
</body>
</html>

popov654

21.01.2012 01:05

А в чём вообще была Ваша цель? Двигать буквы по очереди (с разным интервалом)? Так формулировать чётче желательно :)

melky

21.01.2012 01:14

Цитата:

Сообщение от art13 (Сообщение 151198)

Мне предложили такой вариант. Не уверен что это работает быстро на слабеньких компах.

<html>
<head>
<title></title>
</head>
<body>
<script> 
var mPos = 0;
var cPos = 0;
var bukva;
var step=0;
function moveB()
{
var a;
setTimeout("myBuk = document.getElementById('a1'); mPos = 300; bokMove(myBuk);",75000);
setTimeout("myBuk = document.getElementById('a2'); mPos = 310; bokMove(myBuk);",60000);
setTimeout("myBuk = document.getElementById('a3'); mPos = 320; bokMove(myBuk);",45000);
setTimeout("myBuk = document.getElementById('a4'); mPos = 330; bokMove(myBuk);",30000);
setTimeout("myBuk = document.getElementById('a5'); mPos = 340; bokMove(myBuk);",15000);
var myBuk = document.getElementById("a6"); mPos = 350; bokMove(myBuk);
}
function bokMove(wrBuk)
{
bukva = wrBuk
cPos = parseInt(bukva.style.left);
step = setInterval("dvig();",40);
}
function dvig()
{
cPos++;
if(cPos < mPos) bukva.style.left = cPos + "px";
else clearInterval(step);
}
</script>
<span id="a1" style="position:absolute; left:15px;" onclick="moveB()">c</span>
<span id="a2" style="position:absolute; left:25px;" onclick="moveB()">c</span>
<span id="a3" style="position:absolute; left:35px;" onclick="moveB()">ы</span>
<span id="a4" style="position:absolute; left:45px;" onclick="moveB()">л</span>
<span id="a5" style="position:absolute; left:55px;" onclick="moveB()">к</span>
<span id="a6" style="position:absolute; left:65px;" onclick="moveB()">а</span>
</body>
</html>

этот код меня очень сильно огорчил. как самим способом реализации, так и реализацией.

с нашей помощью, выработайте нормальный алгоритм и нормально его реализуйте.

popov654

21.01.2012 01:31

Кстати, ОМГ... Разве первым аргументом setTimeout() является строка?..

trikadin

21.01.2012 03:38

popov654, можно использовать строку, но нежелательно.

art13

27.01.2012 13:08

Да я понимаю, что это очень тяжело для браузера. Времени очень не хватает сейчас заняться этой задачкой.

Keeper

27.01.2012 23:01

У меня глупый вопрос, а зачем плодить кучу элементов <span>.
Может стоит тягать по букве с помощью функции slice(startPos,endPos), а для анимации использовать один элемент (ну если строго по букве перемещать) в который перемещаемая буква будет закидываться??

Ну или для унификации функции сделать обертывание буквы элементом "на лету" ...

trikadin

27.01.2012 23:05

Можно и так.

Keeper

27.01.2012 23:43

Aж понравилось )

<html>
<head>
</head>
<body>
<div id="t" style="position: absolute">простидижетатор</div>
<script>

var obj = document.getElementById("t");
var x = 0;
var span = {};
var animation_on = false;

function move() {
		x=x+1;
        s=x+"px";
        span.style.left=s;
	}

var letters_move = function() {
// console.log(' x = '+x);
var o = obj.innerHTML;
	if(animation_on)
		{
	    if(x<100) {
	        move();
	        }else{
	        	span.style.display='none';
	        	animation_on = false;
	        	x=0;
	            if(o.length<1) { return false; }
	         	}
		}else{
		    span = document.createElement('SPAN');
		    span.appendChild(document.createTextNode(o.slice(0,1)));
			span.style.top = obj.offsetTop;
		    span.style.left = obj.offsetLeft;
		    span.style.position = "absolute";
		    document.getElementsByTagName('body')[0].appendChild(span);
		    obj.innerHTML = o.slice(1,o.length-1);

		    animation_on = true;
		    // console.log(' - animation_on: '+animation_on );
		    move();
	    }
	 setTimeout("letters_move()",7);

}
setTimeout("letters_move()",7);
</script>
</body>
</html>

trikadin

27.01.2012 23:57

Keeper, сделайте запускаемым, штоле...

Keeper

28.01.2012 00:15

проверил в FF и Chrome, IE 9, Safari, Opera 11.60

trikadin

28.01.2012 10:46

Цитата:

Сообщение от Keeper

проверил в FF и Chrome, IE 9, Safari, Opera 11.60

Ты не понял) Вот здесь можно почитать о вставке запускаемого кода в свои сообщения.

art13

28.01.2012 14:26

Цитата:

Сообщение от trikadin (Сообщение 153548)

Ты не понял) Вот здесь можно почитать о вставке запускаемого кода в свои сообщения.

Ссылка на страничку получилась с тчк в конце)
Вот сюда, там описание как сделать код выкладываемый в сообщениях запускаемым. Т.е. появляется кнопа типа play.

art13

28.01.2012 14:43

Цитата:

Сообщение от Keeper (Сообщение 153504)

Aж понравилось )

Цитата:

Сообщение от trikadin (Сообщение 153508)

Keeper, сделайте запускаемым, штоле...

Я немного причесал.

<html>
<head>
</head>
<body>
<div id="t" style="position: absolute">простидижетатор</div>
<script>
 
var obj = document.getElementById("t");
var x = 0;
var span = {};
var animation_on = false;
 
function move()
{
    x=x+1;
    s=x+"px";
    span.style.left=s;
}
 
var letters_move = function()
{
    // console.log(' x = '+x);
    var o = obj.innerHTML;
    if(animation_on)
    {
	if(x<100) { move();}
	else
	{
	    span.style.display='none';
            animation_on = false;
            x=0;
            if(o.length<1) { return false;}
        }
    }
    else
    {
        span = document.createElement('SPAN');
        span.appendChild(document.createTextNode(o.slice(0,1)));
        span.style.top = obj.offsetTop;
        span.style.left = obj.offsetLeft;
        span.style.position = "absolute";
        document.getElementsByTagName('body')[0].appendChild(span);
        obj.innerHTML = o.slice(1,o.length-1);
 
        animation_on = true;
        // console.log(' - animation_on: '+animation_on );
        move();
    }
    setTimeout("letters_move()",7);
}
setTimeout("letters_move()",7);
</script>
</body>
</html>

Keeper

28.01.2012 15:09

Дак помог нет ? )

trikadin

28.01.2012 16:09

Keeper, а текст должен в конце исчезать?

Keeper

28.01.2012 16:16

trikadin, ну да )

art13

28.01.2012 21:08

Да. Просто мне нужно еще разобраться в вашем коде. Еще только учусь. И больше времени отдаю "С". Спасибо.

Часовой пояс GMT +3, время: 09:19.