Форум

RIMs · #1 (**permalink**) 25.06.2012, 22:29

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

<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>

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

oneguy · #2 (**permalink**) 25.06.2012, 23:21

Есть 2 способа:
1) использовать setInterval и clearInterval;
2) тело цикла while обернуть в функцию, и ёё вызывать в setTimeout, и внутри тела дописать обычный вызов функции TextOutput.

RIMs · #3 (**permalink**) 25.06.2012, 23:23

спасибо. попробую, поэкспериментирую

melky · #4 (**permalink**) 26.06.2012, 00:34

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

дальше уже испоьлзовать в любой момент первую функцию - хоть по клику, хоть по таймауту.

<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>

Deff · #5 (**permalink**) 26.06.2012, 01:35

melky,
Твоя та штучка с анимацией(с уходом влево

(вправо) - с выводом по четверостишьем - бу смотрецо круче

RIMs · #6 (**permalink**) 26.06.2012, 11:23

спасибо, melky, работает.

ksa · #7 (**permalink**) 26.06.2012, 11:38

Сообщение от 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>

Форум

Справочник

Discord чат

Курсы javascript