Динамическая замена текста в блоке

Posted by micher under JavaScript

При нажатии кнопки «Читать далее» должен появиться другой текст взамен старого в том же блоке, а при нажатии кнопки назад, должен появиться предыдущий текст. Как реализовать?

naive

<div style="text-align:left;">
<div id="type_text" class="box">
<script language="JavaScript">
var text = ['текст 1 текст1 текст 1.<br> '+
' ...текст 1 текст1 текст 1<br>'+
' текст 1 текст1 текст 1.'+
' текст 1 текст1 текст 1,'+
' текст 1 текст1 текст 1'+  ' текст 1 текст1 текст 1',
'Умножение вектора на число, конечно, допускает интеграл по поверхности. Аксиома, в первом приближении, стремительно оправдывает детерминант. Лемма отрицательна. Собственное подмножество ускоряет абсолютно сходящийся ряд, таким образом сбылась мечта идиота - утверждение полностью доказано.',    'Матожидание последовательно. Нормальное распределение, конечно, поразительно. Согласно последним исследованиям, огибающая семейства прямых уравновешивает абстрактный сходящийся ряд, дальнейшие выкладки оставим студентам в качестве несложной домашней работы.',    'Интеграл по бесконечной области продуцирует постулат, что неудивительно. Непрерывная функция, общеизвестно, искажает интеграл Гамильтона. Относительная погрешность ускоряет абстрактный интеграл Гамильтона, как и предполагалось. Достаточное условие сходимости небезынтересно изменяет комплексный интеграл от функции комплексной переменной.' ];
var i = 0; var target = 0; var timer;
function type( text ){
clearTimeout( timer );
i++;
if( i <= text.length )
if(text.substr(i-1,1)=='<'){
document.getElementById("type_text").innerHTML +='<br>'
}
else
{
document.getElementById("type_text").innerHTML = text.substr(0, i);
}
timer = setTimeout( function(){ type(text) }, 20 );};
type( text[ target ] );
function changeBg( direction ){
i = 0;   target = Math.min(     text.length-1,     Math.max(       0,       target + direction     )   );
type( text[ target ] ); };
</script>
</div>
</div>
<div id="dalee">
<form>
<table style="height: 70%; width: 60%; margin-left: auto; margin-right: auto;">
<tbody>
<tr>
<td style="text-align: left;">
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;
<input onclick="changeBg(-1);return false;" type="button" value="Назад" />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;</td> <td style="text-align: right;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;
<input onclick="changeBg(1);return false;" type="button" value="Читать далее" />
</td>
</tr>
</tbody>
</table>
</form>
</div>

тема на форуме

Случайные статьи

• Убрать символ разделителя TStringList
• Подсчет файлов в папке макросом VBA
• Поиск и удаление символа в TStringList
• Canvas и полупрозрачный .png
• Поиск файлов исходник
• Группировка полей с разделителем в mysql
• Количество положительных и отрицательных элементов массива
• Программа по отправке и принятию UDP пакетов
• Сравнить два TStringList, найти уникальные строки
• Как вычислить длину строки?