Имеется следующий код:
<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';
i = 0;
function type(){
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);
}
setTimeout( type, 20 );
}
type();
</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;"> <input onclick="changeBg(this);return false;" type="button" value="Назад" /> </td>
<td style="text-align: right;"> <input onclick="changeBg(this);return false;" type="button" value="Читать далее" /></td>
</tr>
</tbody>
</table>
</form>
</div>
При нажатии кнопки "Читать далее" должен появиться другой
текст в том же блоке, а при нажатии кнопки "Назад", должен появиться
предыдущий текст. Прошу помощи и по возможности пример кодом, потому
что не могу сообразить, как это реализовать.
Могли бы помочь?<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;"> <input onclick="changeBg(-1);return false;" type="button" value="Назад" /> </td>
<td style="text-align: right;"> <input onclick="changeBg(1);return false;" type="button" value="Читать далее" /></td>
</tr>
</tbody>
</table>
</form>
</div>я бы переписал послностью код. И поменял оформление, позиционирование кнопок с помощью nbsp не самая лучшая идея, намного проще это сделать через CSS
<div id="output"></div>
<button id="btn1">Вперед</button>
<button id="btn2">Назад</button>
<script>
var message1 = "Test Test Test Test Test Test Test Test Test Test Test Test";
var message2 = "Test 2 Test 2 Test 2 Test 2 Test 2 Test 2 Test 2 Test 2 Test 2 Test 2 Test 2 Test 2";
var message3 = "Test 3 Test 3 Test 3 Test 3 Test 3 Test 3 Test 3 Test 3 Test 3 Test 3 Test 3 Test 3";
var outputDiv = document.getElementById("output");
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
function type(message) {
var i = 0;
outputDiv.innerHTML = "";
var interval = setInterval(function () {
outputDiv.innerHTML += message[i]; // вывести один символ из сообщения
i++;
if (i == message.length) clearInterval(interval); // остановить интервал если вывели все сообщение
}, 20);
}
// клик по кнопке вперед
btn1.onclick = function () {
type(message2);
}
// клик по кнопке назад
btn2.onclick = function () {
type(message3);
}
// запуск после загрузки
type(message1);
</script>Объясните пожалуйста более подробно функцию function changeBg(direction)
function changeBg( direction ){// принимаем внутрь смещение от текущего куска текста
i = 0;// обнуляем глобальный счетчик символов для ф-ции type()
target = Math.min( // ищем id нового куска текста
text.length-1, // отсекаем полученные значения, которые превышают массив
Math.max(
0, // отсекаем отрицательные значения
target + direction // получаем значение для сравнения с минимальным и максимальным
)
);
type( text[ target ] ); // перезапускаем функцию
};
Желательно не использовать глобальные переменные!