Последние записи
- TChromium (CEF3), сохранение изображений
- Как в Delphi XE обнулить таймер?
- Изменить цвет шрифта TextBox на форме
- Ресайз PNG без потери прозрачности
- Вывод на печать графического файла
- Взаимодействие через командную строку
- Перенести программу из Delphi в Lazarus
- Определить текущую ОС
- Автоматическая смена языка (раскладки клавиатуры)
- Сравнение языков на массивах. Часть 2
Интенсив по Python: Работа с API и фреймворками 24-26 ИЮНЯ 2022. Знаете Python, но хотите расширить свои навыки?
Slurm подготовили для вас особенный продукт! Оставить заявку по ссылке - https://slurm.club/3MeqNEk
Online-курс Java с оплатой после трудоустройства. Каждый выпускник получает предложение о работе
И зарплату на 30% выше ожидаемой, подробнее на сайте академии, ссылка - ttps://clck.ru/fCrQw
27th
Сен
Смена текста при нажатии на кнопку
Posted by maloy under JavaScript
Anorions
Добрый день всем. В JS и CSS я новенький, поэтому прошу помощи.
Имеется код:
<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>
При нажатии кнопки «Читать далее» должен появиться другой текст взамен старого в том же блоке, а при нажатии кнопки назад, должен появиться предыдущий текст. Прошу помощи и по возможности пример кодом и из за того, что новенький в этом всём, более простым языком объяснить.
P.S. если в этом коде что то смущает, поправьте, пожалуйста.
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;">
<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>
как-то так
Naive
function changeBg( direction ){// принимаем внутрь смещение от текущего куска текста
i = 0;// обнуляем глобальный счетчик символов для ф-ии type()
target = Math.min( // ищем айди нового куска текста
text.length-1, // отсекаем полученные значения, которые превышают массив
Math.max(
0, // отсекаем отрицательные значения
target + direction // получаем значение для сравнения с минимальным и максимальным
)
);
type( text[ target ] ); // перезапускаем функцию
};
п.с. глобальные переменные — сущее зло
Похожие статьи
Купить рекламу на сайте за 1000 руб
пишите сюда - alarforum@yandex.ru
Да и по любым другим вопросам пишите на почту
пеллетные котлы
Пеллетный котел Emtas
Наши форумы по программированию:
- Форум Web программирование (веб)
- Delphi форумы
- Форумы C (Си)
- Форум .NET Frameworks (точка нет фреймворки)
- Форум Java (джава)
- Форум низкоуровневое программирование
- Форум VBA (вба)
- Форум OpenGL
- Форум DirectX
- Форум CAD проектирование
- Форум по операционным системам
- Форум Software (Софт)
- Форум Hardware (Компьютерное железо)