У меня есть текст, который печатается автоматически - Скрипты и коды для юкоз - Форум аццкого кодера
Фильтр по:
  

Страница 1 из 212»
Модератор форума: likbezz 
Скрипты и коды для юкоз - Форум аццкого кодера » Как сделать? Информация для вновь прибывших » Вопрос по теме ... » У меня есть текст, который печатается автоматически (Проблема в том, что при переносе строки появляется тэг br)
У меня есть текст, который печатается автоматически
Дата: Понедельник, 22.09.2014, 01:35 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9095
Награды: 23
Репутация: 457
Статус: Unknown


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 новичок и по возможности прошу более доступным языком объяснить. Спасибо.


 
Дата: Понедельник, 22.09.2014, 02:29 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9095
Награды: 23
Репутация: 457
Статус: Unknown


Вариант номер 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>


 
Дата: Понедельник, 22.09.2014, 02:31 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9095
Награды: 23
Репутация: 457
Статус: Unknown


Цитата likbezz, Пн, 22.09.2014, 01:35:38
2)Так же есть вопрос, как сделать этот текст заменяющимся. Т.е. имеется кнопка, при нажатии которой этот текст меняется на другой. (как книжка). Пробовал на примере Вашего когда по смене фона на нажатие кнопки, но потерпел неудачу(((
Подскажите, пожалуйста, как реализовать это всё?

Реализую за деньги.


 
Дата: Понедельник, 22.09.2014, 17:44 |
Anorions
Рядовой
Группа: Зарегистрированные
Сообщений: 10
Награды: 0
Репутация: 0
Статус: Offline


Огромное спасибо за помощь! Насчёт 2 за деньги, я пока сам попробую реализовать, спасибо)

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

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

 
Дата: Понедельник, 22.09.2014, 18:25 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9095
Награды: 23
Репутация: 457
Статус: Unknown


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

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

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

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

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

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

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


 
Дата: Понедельник, 22.09.2014, 19:38 |
Anorions
Рядовой
Группа: Зарегистрированные
Сообщений: 10
Награды: 0
Репутация: 0
Статус: Offline


Что то я занубил с табуляцией... \(без пробела)t - это ведь табуляция? если да, то у меня она не работает( \(без пробела)n тоже почему то не работает.

 
Дата: Понедельник, 22.09.2014, 20:43 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9095
Награды: 23
Репутация: 457
Статус: Unknown


Anorions,
Цитата Anorions, Пн, 22.09.2014, 19:38:35
Что то я занубил с табуляцией...

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

Если что: JavaScript. Вставка cпециальных cимволов в строку


 
Дата: Среда, 24.09.2014, 19:06 |
Anorions
Рядовой
Группа: Зарегистрированные
Сообщений: 10
Награды: 0
Репутация: 0
Статус: Offline


После каждого тэга, скорость печатывания уменьшается в разы и доходить чуть ли не до 1 символа в полторы секунды. Есть способы это исправить? Или же всё таки придётся от тэга br отказываться?(((

 
Дата: Среда, 24.09.2014, 21:57 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9095
Награды: 23
Репутация: 457
Статус: Unknown


Anorions,
Цитата Anorions, Ср, 24.09.2014, 19:06:30
После каждого тэга, скорость печатывания уменьшается в разы и доходить чуть ли не до 1 символа в полторы секунды.

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

У меня, например, раньше стоял такой:
Прежде чем писать...


 
Дата: Четверг, 25.09.2014, 19:15 |
Anorions
Рядовой
Группа: Зарегистрированные
Сообщений: 10
Награды: 0
Репутация: 0
Статус: Offline


Мне вроде как помогла замена setTimeout( type, 25 ); на setInterval (type, 20);. Задержка вроде ушла, по крайней мере не заметно теперь. smile

 
Дата: Четверг, 25.09.2014, 19:51 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9095
Награды: 23
Репутация: 457
Статус: Unknown


Anorions,
Цитата Anorions, Чт, 25.09.2014, 19:15:33
вроде как помогла замена setTimeout( type, 25 ); на setInterval (type, 20);

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

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

Ну и ладушки тогда ) не трогай то, что работает.. ©


 
Дата: Четверг, 25.09.2014, 19:58 |
Anorions
Рядовой
Группа: Зарегистрированные
Сообщений: 10
Награды: 0
Репутация: 0
Статус: Offline


Честно говоря, имею общее представление только, чем отличаются эти методы... sad

 
Дата: Четверг, 25.09.2014, 20:30 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9095
Награды: 23
Репутация: 457
Статус: Unknown


Anorions,
Цитата Anorions, Чт, 25.09.2014, 19:58:18
Честно говоря, имею общее представление только, чем отличаются эти методы...

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


 
Дата: Вторник, 30.09.2014, 12:43 |
Anorions
Рядовой
Группа: Зарегистрированные
Сообщений: 10
Награды: 0
Репутация: 0
Статус: Offline


Вот в итоге получился какой код.
Код

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

Есть ли замечания? Может как то его можно упростить или всё в порядке?


 
Дата: Среда, 01.10.2014, 09:37 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9095
Награды: 23
Репутация: 457
Статус: Unknown


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

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

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

Ну а так - в общем .. более-менее)


 
Скрипты и коды для юкоз - Форум аццкого кодера » Как сделать? Информация для вновь прибывших » Вопрос по теме ... » У меня есть текст, который печатается автоматически (Проблема в том, что при переносе строки появляется тэг br)
Страница 1 из 212»
Поиск: