|
Перебежка по буквам.
Задача: есть слово, нужно что бы оно при клике, начиная с последней буквы переместилось вправо. По одной букве.
Все слово я заставил это сделать. И понимаю, что бы выдернуть букву нужен доступ к символам 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>
Здесь пока работает при загрузке документа))) Читал про строки, но как использовать один символ из строки, обработать его и с новыми значениями позиции вернуть, так и не допер. |
setInterval("move()",7) e dас будет выполнятся бесконечно, хотя надобности в нём уже никакой не будет.
А по проблеме: обернуть каждую букву в span. или так:) <span onclick="setInterval(function(){innerHTML=innerHTML.slice(1)+innerHTML.charAt(0)},100)"> слово </span>
|
Вот что получилось.
<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"); |
Дошел я до такого нагромождения. С моими представлениями о 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>
|
Перепишите, это неправильно)
|
Цитата:
Может кто то другой окажется компетентнее предыдущего оратора? Я не прошу за меня писать код. Укажите ошибки, где несостыковки в коде? Нельзя switch заталкивать в функцию? Я неправильно вызываю функцию? Или с переменными накосячил? |
|
Цитата:
|
Цитата:
|
art13, не поймите меня неправильно, но ваш код не очень)
Вы правильно использовали switch, но в том месте, где его использование абсолютно неоправданно. Более того - использование здесь идентификаторов абсолютно неоправданно. Просто получайте внутри тега-родителя все спаны через parent.getElementsByTagName. Дальше массивом перебирайте их и ставьте нужные св-ва. Много ответов на свои вопросы вы так же найдёте в этой статье. Кстати - ставьте один интервал для всех элементов, а не для каждого отдельного. |
| Часовой пояс GMT +3, время: 12:14. |
|