Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 25.06.2012, 22:29
Интересующийся
Отправить личное сообщение для RIMs Посмотреть профиль Найти все сообщения от RIMs
 
Регистрация: 09.01.2012
Сообщений: 14

построчный вывод текста на экран
Хочу вывести стихотворение, так чтобы выглядело как анимация: строка - пауза- еще строка- пауза.

<div id="Verse5" style="display:block">

<script language="javascript">  
function TextOutput (text1){
   document.getElementById('Verse5').innerHTML=text1;
}

 var str1 = '<h4 class="ColorBlue1">  Ода. </h4> \
Туча мглою небо кроет<br /> Вихри снежные крутя<br /> \
То как зверь она завоет<br /> То заплачет как дитя<br /> <br />';

var str2 = "";
var pos1 = 0 ;
while ( pos1 != -1 ) {
       pos2 = pos1;
	   pos1 = str1.indexOf("<br />",pos2+5);
	   str2 = str1.substring(pos2,pos1);
	   int1= setTimeout(function(){TextOutput(str2);},1000);
	}

</script>

</div>

скрипт сначала выжидает всю накопленную паузу, а потом только выдает сразу весь текст.
Чем это лечится?
Ответить с цитированием
  #2 (permalink)  
Старый 25.06.2012, 23:21
Профессор
Отправить личное сообщение для oneguy Посмотреть профиль Найти все сообщения от oneguy
 
Регистрация: 31.05.2012
Сообщений: 396

Есть 2 способа:
1) использовать setInterval и clearInterval;
2) тело цикла while обернуть в функцию, и ёё вызывать в setTimeout, и внутри тела дописать обычный вызов функции TextOutput.
Ответить с цитированием
  #3 (permalink)  
Старый 25.06.2012, 23:23
Интересующийся
Отправить личное сообщение для RIMs Посмотреть профиль Найти все сообщения от RIMs
 
Регистрация: 09.01.2012
Сообщений: 14

спасибо. попробую, поэкспериментирую
Ответить с цитированием
  #4 (permalink)  
Старый 26.06.2012, 00:34
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

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

дальше уже испоьлзовать в любой момент первую функцию - хоть по клику, хоть по таймауту.
<body><h1>СТИХЪ</h1></body>
<script>
var str = "РАЗ <br> ДВА <br> ТРИ";

// чтобы не использовать трюки вроде замыкания,
// я просто оставлю переменные в ГО.
var splitted, i, delimiter = "<br>";

function split(string) {
    // первый запуск
    if (splitted === undefined) {
        splitted = string.split(delimiter);
        i = 0;
    }
    if (i in splitted) {
        render(splitted[i]);
        i += 1;
        // даём понять, что всё хорошо
        return true;
    } else {
        // всё, конец.
        return false;
    }
}

// вывод текста на страницу. тут анимации всякие.
function render(string) {
    document.body.innerHTML += "<p>" + string + "</p>";
}

var id = setInterval(function(){
    if (!split(str)) {
        clearInterval(id);
    }
}, 1000);
</script>
Ответить с цитированием
  #5 (permalink)  
Старый 26.06.2012, 01:35
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

melky,
Твоя та штучка с анимацией(с уходом влево (вправо) - с выводом по четверостишьем - бу смотрецо круче
Ответить с цитированием
  #6 (permalink)  
Старый 26.06.2012, 11:23
Интересующийся
Отправить личное сообщение для RIMs Посмотреть профиль Найти все сообщения от RIMs
 
Регистрация: 09.01.2012
Сообщений: 14

спасибо, melky, работает.
Ответить с цитированием
  #7 (permalink)  
Старый 26.06.2012, 11:38
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,109

Сообщение от RIMs
Хочу вывести стихотворение, так чтобы выглядело как анимация: строка - пауза- еще строка- пауза.
Как вариант...

<!DOCTYPE html>
<html>
<head>
<!--
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
</style>
<script type="text/javascript">
var str = '<h4 class="ColorBlue1">Ода.</h4><br />Туча мглою небо кроет<br /> Вихри снежные крутя<br />То как зверь она завоет<br />	То заплачет как дитя<br />';
function test(N) {
	var dlm='<br />';
	var a=str.split(dlm);
	N=N||0;
	dlm=(N==0)? '': dlm;
	document.getElementById('txt').innerHTML+=dlm+a[N];
	if (++N==a.length) {
		return
	};
	setTimeout(function (){
		test(N);
	},1000);
};
</script>

</div>
</script>
</head>
<body onload='test()'>
<div id='txt'></div>
</body>
</html>
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Вывод выделенного текста в форме другого окна Mrjoey Events/DOM/Window 10 22.06.2011 22:31
Вывод текста button onclick $wAiN_n Общие вопросы Javascript 4 27.04.2011 18:48
Вывод и обновления значений на экран. -Aleks- Events/DOM/Window 10 09.04.2011 13:36
Скрипты отправка сообщений между пользователями, скрипт вывод текста на страницу.... Rapala Элементы интерфейса 2 12.01.2011 17:27
Вывод текста по времени Madjahet Элементы интерфейса 15 14.04.2010 17:19