Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Как сделать бегущую строку? (https://javascript.ru/forum/misc/1212-kak-sdelat-begushhuyu-stroku.html)

Forgott 07.05.2008 12:17

Как сделать бегущую строку?
 
И опять же всем доброго времени суток!
Извиняюсь за назойливость, но очень хотелось бы знать...
Видел кучу скриптов с бегущей строкой, но все они мне кажутся сложными. Есть более простой вариант скажем, чтобы слово Hello по букве через секунду появлялось в том же статус баре? Что-то я никак с функцией setTimeout не разберусь :( Пробовал по старой привычке делать так, но... облом!

function t();
{
document.write("H")
setTimeout('f', 1000)
document.write("e")
setTimeout('f', 1000)
...


Может кто подскажет?

Gvozd 07.05.2008 13:44

функция setTimeout всего лиш указывает что через скока-то милисекунд выполнится функция, указанная первым параметром, но не останавливает скрипт.
При этом скрипт продолжает выполнятся дальше, до соответствующего момента, как ни в чем не бывало.
Если же поставить подряд два setTimeout, с одинаковой задержкой, то они выполнятся одновременно
Ваш пример правильно надо записывать так
function t()//обратите внимание, здесь не нужна точка с запятой
{
setTimeout('document.write("H")', 1000)//выполнится через секунду
setTimeout('document.write("e")', 2000)//выполнится через две секунды
...

Forgott 08.05.2008 13:11

Странно! С задержкой появляется только H, а остальных букв вообще нет :(

Gvozd 08.05.2008 15:12

Было лень досконально разбиратся, но судя по всему дело в конструкции document.write("H"). Похоже, что первая из них затирает остальной код. ПО крайней мере старый добраый innerHTML работает на ура
<html> 
<head> 
</head> 
<script type="text/javascript"> 
function t(){
setTimeout('document.getElementById("qwezxc").innerHTML+="H"',1000)
setTimeout('document.getElementById("qwezxc").innerHTML+="e"',2000)
setTimeout('document.getElementById("qwezxc").innerHTML+="l"',3000)
setTimeout('document.getElementById("qwezxc").innerHTML+="l"',4000)
setTimeout('document.getElementById("qwezxc").innerHTML+="o"',5000)
setTimeout('document.getElementById("qwezxc").innerHTML+=","',6000)
setTimeout('document.getElementById("qwezxc").innerHTML+="W"',7000)
setTimeout('document.getElementById("qwezxc").innerHTML+="o"',8000)
setTimeout('document.getElementById("qwezxc").innerHTML+="r"',9000)
setTimeout('document.getElementById("qwezxc").innerHTML+="l"',10000)
setTimeout('document.getElementById("qwezxc").innerHTML+="d"',11000)

}
</script> 
<body onload="t();"> 
<div id="qwezxc">
</div>

</body> 
</html>

Kolyaj 08.05.2008 15:54

Не могу больше на такое смотреть
function t(elem, str) {
  for (var i = 0; i < str.length; i++)
    setTimeout(function(char) { return function() { elem.innerHTML += char; } }(str.charAt(i)), i * 1000);
}

t(document.getElementById(qwezxc), 'Hello, World')
Уж хотя бы так.

Gvozd 08.05.2008 16:22

Цитата:

Сообщение от Kolyaj
Не могу больше на такое смотреть

Да, ты прав =)
просто сижк заглюченный, и думать о чем-то сложнее копипасты, мне труднова-то.
да и решил смльно не усложнять код)))))

Forgott 08.05.2008 16:38

2 Kolyaj. А можно прокоментировать его? Что-то понятно, а что-то нет. Да, и куда строку t(document... вставлять, если она вне пределов функции? Уж простите мне мой делетанизм!

Gvozd 08.05.2008 17:41

провоментирую я наверно, если никто не возражает ;)
function t(elem, str) {
  for (var i = 0; i < str.length; i++)//цикл. перебирае последовательно все буквы переменной str
    setTimeout(function(char) { return function() { elem.innerHTML += char; } }(str.charAt(i)), i * 1000);//вешает на setTimeout динамически сгенерированную функцию, через i*1000 милисекунд
}
t(document.getElementById(qwezxc), 'Hello, World')//данный вызов функции может быть где угодно. например по нажатию кнопки, либо в составе какой-нибудь другой функции

теперь по поводу первого параметра setTimeout:
он создает анонимную функцию, которая делает
return function() { elem.innerHTML += char; } 
//возвращаем еще одну анонимную функцию, которая занимается добавлением буквы на страницу, внутрь элемента elem

после этого первая анонимная функция запускается на выполнение с помощью (str.charAt(i)), и возвращает в setTimeout ссылку на вторую анонимную функцию.
//первым параметром функции setTimeout должна быть функция, не
//принимающая параметров. Если мы вместо этого передаем строку кода,
//то он автоматически преобразуется в функцию
//таким образом следующие три конструкции идентичны
setTimeout("alert('Hello, World');",1000);
//
function func()
{alert('Hello, World');}
setTimeout(func,1000);
//
func=function()//альтернативный способ создания функции
{alert('Hello, World');}
setTimeout(func,1000);

Также советую почитать эту статью
http://javascript.ru/tutorial/basic/functions

Forgott 10.05.2008 11:25

Благодарю!

scuter 11.05.2008 20:53

ребяты не парьнесь в HTML есть тег который делает бегущую строку.


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