[Ликбез]
Форма входа
Логин:
Пароль:
Меню сайта
Скрипты и коды для юкоз - Форум аццкого кодера » Вопрос по теме ... » У меня есть текст, который печатается автоматически
У меня есть текст, который печатается автоматически
[1] likbezz [22.09.2014, 01:35]
Q PM:
Мне нужна Ваша помощь по javascript.
1) У меня есть текст, который печатается автоматически. Проблема в том, что при переносе строки появляется тэг br , но далее сам удаляется и строка переноситься. как сделать так, чтобы этот тэг не отображался? Если можно, на примере кода какого нибудь.
Мой код:
Код
<script language="JavaScript">
var text = 'текст текст текст.<br> '+
' текст'+   
' текст текст текст'+   
' текст текст текст текст'+   
' текст текст текст'+   
' текст текст текст.';
i = 0;

function type(){
   i++;
   if( i <= text.length )
   document.getElementById("type_text").innerHTML = text.substr(0, i);
    
   setTimeout( type, 25 );
}
type();
</script>


2)Так же есть вопрос, как сделать этот текст заменяющимся. Т.е. имеется кнопка, при нажатии которой этот текст меняется на другой. (как книжка). Пробовал на примере Вашего когда по смене фона на нажатие кнопки, но потерпел неудачу(((
Подскажите, пожалуйста, как реализовать это всё?
P.S. Z новичок и по возможности прошу более доступным языком объяснить. Спасибо.
[2] likbezz [22.09.2014, 02:29]
Вариант номер 1: использовать white-space:pre; - он выводит текст так как есть, со всеми переносами.
Переносы ставятся как «\n» - в первой строке видно
Код
<div id="type_text" style="white-space:pre;"></div>
<script language="JavaScript">
var text = 'текст текст текст.\n'+
' текст'+    
' текст текст текст'+    
' текст текст текст текст'+    
' текст текст текст'+    
' текст текст текст.';
i = 0;

function type(){
    i++;
    if( i <= text.length){
     document.getElementById("type_text").innerHTML = text.substr(0, i);
   }
    setTimeout( type, 25 );
}
type();
</script>

Второй вариант - усложнить скрипт, что бы он искал/фильтровал ваши <br> и заменял сразу не по одному символу а по четыре, типа:
Код
<div id="type_text"></div>
<script language="JavaScript">
var text = 'текст текст текст.<br>'+
' текст'+    
' текст текст текст<br>'+    
' текст текст текст текст<br>'+    
' текст текст текст<br>'+    
' текст текст текст.';
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, 25 );
}
type();
</script>
[3] likbezz [22.09.2014, 02:31]
Цитата likbezz, Пн, 22.09.2014, 01:35:38
2)Так же есть вопрос, как сделать этот текст заменяющимся. Т.е. имеется кнопка, при нажатии которой этот текст меняется на другой. (как книжка). Пробовал на примере Вашего когда по смене фона на нажатие кнопки, но потерпел неудачу(((
Подскажите, пожалуйста, как реализовать это всё?

Реализую за деньги.
[4] Anorions [22.09.2014, 17:44]
Огромное спасибо за помощь! Насчёт 2 за деньги, я пока сам попробую реализовать, спасибо)

Добавлено (22.09.2014, 17:29)
---------------------------------------------
А как тогда к 1 вопросу о переносе добавить, чтобы он не пропечатывал к примеру  ? если я добавляю условие к этому, он не воспринимает код и тэги опять пропечатываются(((

Добавлено (22.09.2014, 17:44)
---------------------------------------------
Так же присутствует задержка в месте тэга. при теге р - задержка около полторы секунды.

[5] likbezz [22.09.2014, 18:25]
Anorions,
Цитата Anorions, Пн, 22.09.2014, 17:44:05
Огромное спасибо за помощь! Насчёт 2 за деньги, я пока сам попробую реализовать, спасибо)

Да, незачто)
Если что, вы знаете, что делать )

Цитата Anorions, Пн, 22.09.2014, 17:44:05
А как тогда к 1 вопросу о переносе добавить, чтобы он не пропечатывал к примеру ? если я добавляю условие к этому, он не воспринимает код и тэги опять пропечатываются(((

Добавить условие - если символ - вопросительный знак - его не печатать.
Точно также и к другим символам.

Цитата Anorions, Пн, 22.09.2014, 17:44:05
Так же присутствует задержка в месте тэга. при теге р - задержка около полторы секунды.

Обычно в подобном тексте не присутствуют подобные теги... Подумайте над тем, что бы удалить их оттуда.

А вообще, изначально, скрипт предназначался для текстового поля, где кроме текста есть только переносы слов и табуляция.
[6] Anorions [22.09.2014, 19:38]
Что то я занубил с табуляцией... \(без пробела)t - это ведь табуляция? если да, то у меня она не работает( \(без пробела)n тоже почему то не работает.
[7] likbezz [22.09.2014, 20:43]
Anorions,
Цитата Anorions, Пн, 22.09.2014, 19:38:35
Что то я занубил с табуляцией...

Вы, видимо, невнимательно прочитали что я написал.
А написал я что изначально скрипт был написан для формы - текстового опля, где работают и \n - перенос строки и \t - табуляция.

Если что: JavaScript. Вставка cпециальных cимволов в строку
[8] Anorions [24.09.2014, 19:06]
После каждого тэга, скорость печатывания уменьшается в разы и доходить чуть ли не до 1 символа в полторы секунды. Есть способы это исправить? Или же всё таки придётся от тэга br отказываться?(((
[9] likbezz [24.09.2014, 21:57]
Anorions,
Цитата Anorions, Ср, 24.09.2014, 19:06:30
После каждого тэга, скорость печатывания уменьшается в разы и доходить чуть ли не до 1 символа в полторы секунды.

Поищите более грамотные скрипты для подобного - данный - не айс..
Но и сами понимаете, что чем больше текста, тем больше интераций цикла, следовательно и больше нагрузка на браузер... А у вас еще и проверка каждого символа на бр висит..

У меня, например, раньше стоял такой:
Прежде чем писать...
[10] Anorions [25.09.2014, 19:15]
Мне вроде как помогла замена setTimeout( type, 25 ); на setInterval (type, 20);. Задержка вроде ушла, по крайней мере не заметно теперь. smile
[11] likbezz [25.09.2014, 19:51]
Anorions,
Цитата Anorions, Чт, 25.09.2014, 19:15:33
вроде как помогла замена setTimeout( type, 25 ); на setInterval (type, 20);

Надеюсь вы в курсе чем отличаются эти методы?) ...

Цитата Anorions, Чт, 25.09.2014, 19:15:33
Задержка вроде ушла, по крайней мере не заметно теперь

Ну и ладушки тогда ) не трогай то, что работает.. ©
[12] Anorions [25.09.2014, 19:58]
Честно говоря, имею общее представление только, чем отличаются эти методы... sad
[13] likbezz [25.09.2014, 20:30]
Anorions,
Цитата Anorions, Чт, 25.09.2014, 19:58:18
Честно говоря, имею общее представление только, чем отличаются эти методы...

setTimeout
Метод setTimeout выполняет код (или функцию), указанный в первом аргументе, асинхронно, с задержкой в delay миллисекунд.
В отличие от метода setInterval, setTimeout выполняет код только один раз.
В отличие от метода setTimeout, setInterval выполняет код много раз, через равные промежутки времени, пока не будет остановлен при помощи clearInterval.
[14] Anorions [30.09.2014, 12:43]
Вот в итоге получился какой код.
Код

<div style="text-align:left;">
<div id="type_text" class="box">
<script language="JavaScript">
var text = ['текст текст1 текст<br> '+
' текст текст текст<br>'+  
' текст текст текст.',
'текст2 текстк 2 текст2.<br>'+
'"текст?",
'текст3 текст3 текст3'
];
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;" class="button" type="image" src="http://cs617220.vk.me/v617220002/1c90c/r4qgO5AEzJ0.jpg" alt="Предыдущая страница" />            </td>
<td><input onclick="changeBg(-999);return false;" type="button" value="в начало" class="button"/></td>
<td style="text-align: right;">            <input onclick="changeBg(1);return false;" class="button" type="image" src="http://cs617220.vk.me/v617220002/1c913/wr25O7C3nxg.jpg" alt="Следующая страница"/></td>
</tr>
</tbody>
</table>
</form>
</div>

Есть ли замечания? Может как то его можно упростить или всё в порядке?
[15] likbezz [01.10.2014, 09:37]
Anorions,
Цитата Anorions, Вт, 30.09.2014, 12:43:55
Вот в итоге получился какой код.
Есть ли замечания? Может как то его можно упростить или всё в порядке?

В принципе, вот эти две операции лишние, и переменная, соответственно, не нужна:
Код
var timer; - лишнее
clearTimeout( timer ); - незачем удалять, раз ее нет.
timer = setTimeout( function(){ type(text) }, 20 ); - достаточно просто вызвать:
setTimeout( function(){ type(text) }, 20 );

..но, после удаления, почему-то, возрастает скорость вывода текста при нажатии кнопки [в начало]..

Ну а так - в общем .. более-менее)
Полная версия сайта