Javascript.RU

Печатающийся текст на javascript. Как сделать печатающийся текст как в фильме матрица?

В фильме Матрица в самом начале идет печатающийся текст.
В прочем делается такой скрипт очень просто и делать только его я не буду.
Что я хочу сделать?

Хочу чтобы можно было выбирать:
- либо печатается текст
- либо сразу выводится строка
- скорость печатающего текста
- делать имитацию печатания вручную
- чтобы параметры можно было передавать в разнобой или передавать только часть
- если текст уже напечатался чтоб можно было добавлять и печатать его дальше

И так быстренько соберем движок

<script type="text/javascript" src="http://scriptjava.net/source/scriptjava/scriptjava.js"></script>

<div id="portal"></div>
<script type="text/javascript">
				(function() {
				
					var portal = function (id) {
						this.id=id;
						this.stream=[];
						this.position=0;
						this.counter=1;
						this.txt='';
						this.addstream = function () {
							var txt = '';
							var smin = 30;
							var smax = 90;
							var key = false;
							var k=true;
							for(var i=0;i<arguments.length;i++) {
								if(typeof arguments[i] == 'string') {
									txt = arguments[i];
								}
								if(typeof arguments[i] == 'boolean') {
									key = arguments[i];
								}
								if(typeof arguments[i] == 'number') {
									if(k) {
										k=false;
										smin = arguments[i];
									}
									else {
										smax = arguments[i];
									}
								}
							}
							
							this.stream.push([txt,smin,smax,key]);
						}
						this.execute = function () {
							if(this.stream[this.position][3]) {
								$$(this.id,this.txt+this.stream[this.position][0].substr(0,this.counter));
								this.counter++;
								if(this.counter<=this.stream[this.position][0].length) {
									var th = this;
									setTimeout(function () { th.execute(); },$$s.randnum(th.stream[th.position][1],th.stream[th.position][2]));
								}
								else {
									$$(this.id,$$(this.id).innerHTML+'<br />');
									this.txt=$$(this.id).innerHTML;
									this.counter=1;
									this.position++;
									if(this.position<=this.stream.length-1) {
										var th = this;
										setTimeout(function () { th.execute(); },$$s.randnum(th.stream[th.position][1],th.stream[th.position][2]));
									}
								}
							}
							else {
								$$(this.id,this.txt+this.stream[this.position][0]+'<br />');
								this.txt=$$(this.id).innerHTML;
								this.position++;
								if(this.position<=this.stream.length-1) {
									var th = this;
									setTimeout(function () { th.execute(); },$$s.randnum(th.stream[th.position][1],th.stream[th.position][2]));
								}
							}
						}
						this.create = function () {
							var th = this;
							setTimeout(function () { th.execute(); },$$s.randnum(th.stream[th.position][1],th.stream[th.position][2]));
						}
					}
					
					
					
					
					var parallelworld = new portal('portal');
                  	parallelworld.addstream('Открываю портал в мир без границ...',true);
					parallelworld.addstream('---------------------------------------------------',50,150,true);
					parallelworld.addstream();
					parallelworld.addstream('________________________________Oooo______');
					parallelworld.addstream('_________________________oooO___(___)_____');
					parallelworld.addstream('____________Oooo________(___)____)_/______');
					parallelworld.addstream('____oooO___(___)_________\\_(____(_/_______');
					parallelworld.addstream('___(___)____)_/___________\\_)_____________');
					parallelworld.addstream('____\\_(____(_/____________________________');
					parallelworld.addstream('_____\\_)__________________________________');
					parallelworld.addstream('_________________________________Oooo_____');
					parallelworld.addstream('_________________________oooO___(___)_____');
					parallelworld.addstream('____________Oooo________(___)____)_/______');
					parallelworld.addstream('____oooO___(___)_________\\_(____(_/_______');
					parallelworld.addstream('___(___)____)_/____________\\_)____________');
					parallelworld.addstream('____\\_(____(_/____________________________');
					parallelworld.addstream('_____\\_)__________________________________');
					parallelworld.addstream('__________________________________________');
					parallelworld.addstream('<span style="background:#000000;color:#ffffff;">_________________________________$________</span>');
					parallelworld.addstream('<span style="background:#000000;color:#ffffff;">_______$$______________________$$$________</span>');
					parallelworld.addstream('<span style="background:#000000;color:#ffffff;">_______$$$$___________________$$$$________</span>');
					parallelworld.addstream('<span style="background:#000000;color:#ffffff;">________$$$$$________________$$$$$________</span>');
					parallelworld.addstream('<span style="background:#000000;color:#ffffff;">________$$$$$$______________$$$$$$________</span>');
					parallelworld.addstream('<span style="background:#000000;color:#ffffff;">_________$$$$$$$____________$$$$$$________</span>');
					parallelworld.addstream('<span style="background:#000000;color:#ffffff;">___________$$$$$$$_________$$$$$$$________</span>');
					parallelworld.addstream('<span style="background:#000000;color:#ffffff;">____________$$$$$$$$$_____$$$$$$$_________</span>');
					parallelworld.addstream('<span style="background:#000000;color:#ffffff;">______________$$$$$$$$____$$$$$$$_________</span>');
					parallelworld.addstream('<span style="background:#000000;color:#ffffff;">________________$$$$$$$$__$$$$$$__________</span>');
					parallelworld.addstream('<span style="background:#000000;color:#ffffff;">___________________$$$$$$_$$$$$___________</span>');
					parallelworld.addstream('<span style="background:#000000;color:#ffffff;">____________________$$$$$$$$$_____________</span>');
					parallelworld.addstream('<span style="background:#000000;color:#ffffff;">________________$$$$$$$$$$$$$_____________</span>');
					parallelworld.addstream('<span style="background:#000000;color:#ffffff;">______________$$$$$$$$$$$$$$$$____________</span>');
					parallelworld.addstream('<span style="background:#000000;color:#ffffff;">_____________$$$___$$$$$$$$$$$$___________</span>');
					parallelworld.addstream('<span style="background:#000000;color:#ffffff;">____________$$$$$_$$$$$$$$$$$$$___________</span>');
					parallelworld.addstream('<span style="background:#000000;color:#ffffff;">____________$$$$$$$$$$$$$$$$$$$___________</span>');
					parallelworld.addstream('<span style="background:#000000;color:#ffffff;">_____________$$$$$$$$$$$$$$$$$____________</span>');
					parallelworld.addstream('<span style="background:#000000;color:#ffffff;">_______________$$$$$$$$$$$$$$_____________</span>');
					parallelworld.addstream('<span style="background:#000000;color:#ffffff;">_________________$$$$$$$$$$_______________</span>');
					parallelworld.addstream('<span style="background:#000000;color:#ffffff;">________________$$$$$$$$$$$$______________</span>');
					parallelworld.addstream('<span style="background:#000000;color:#ffffff;">______________$$$$$$$$$$$$$$$_____________</span>');
					parallelworld.addstream('<span style="background:#000000;color:#ffffff;">__________________________________________</span>');
					
					parallelworld.addstream();
					parallelworld.addstream('Не удалось загрузить информацию',true);
					parallelworld.addstream('Закрываю портал...',50,150,true);
					parallelworld.create();
                  	
                  setTimeout(function () { parallelworld.addstream('Прошла минута',50,150,true); parallelworld.create(); },60000);//добавляю строку намного позднее того как все сработало
				})();
			</script>

Немного поясню:
Вначале нужно создать экземпляр обьекта что мы и делаем

var parallelworld = new portal('portal');

Как видите при создании обьекта мы передали ему id элемента в котором будет печататься текст.
Дальше нужно добавлять в поток любое количество строк

parallelworld.addstream('Печатаю текст',30,50,true);
parallelworld.addstream('Вывожу стразу',50,150,false);
parallelworld.addstream('Печатаю текст 1',true);
parallelworld.addstream('Вывожу стразу 1');
parallelworld.addstream(30,true,'Печатаю текст 2',50);
parallelworld.addstream(50,'Вывожу стразу 2',150,false);

Параметры можно опускать и писать в любом порядке!!!

Теперь чтобы запустить печать нужно запустить метод

parallelworld.create();

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

Чтобы продолжить печать, которая уже завершилась достаточно сделать следующие

Добавить новые строки в поток

parallelworld.addstream('Новая строка',30,50,true);
parallelworld.addstream('Вывожу новую строку',50,150,false);

И запустить печать

parallelworld.create();

Вот собственно и все!

Так как все это дело помещено в анонимную функцию, мы сильно ограничены в создании новых экземплярах обьекта.
Функцию можно убрать и создавать экземпляры объектов в любое время.

Смотрим пример:

Сделайте потише звук - играет музон
Пример печатающегося текста под музыку

P.S.
Текстовые картинки взяты из программы vproflood gold

+3

Отправить комментарий

Приветствуются комментарии:
  • Полезные.
  • Дополняющие прочитанное.
  • Вопросы по прочитанному. Именно по прочитанному, чтобы ответ на него помог другим разобраться в предмете статьи. Другие вопросы могут быть удалены.
    Для остальных вопросов и обсуждений есть форум.
P.S. Лучшее "спасибо" - не комментарий, как все здорово, а рекомендация или ссылка на статью.
Содержание этого поля является приватным и не предназначено к показу.
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Разрешены HTML-таги: <strike> <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <u> <i> <b> <pre> <img> <abbr> <blockquote> <h1> <h2> <h3> <h4> <h5> <p> <div> <span> <sub> <sup>
  • Строки и параграфы переносятся автоматически.
  • Текстовые смайлы будут заменены на графические.

Подробнее о форматировании

CAPTCHA
Антиспам
3 + 4 =
Введите результат. Например, для 1+3, введите 4.
 
Поиск по сайту
Другие записи этого автора
seoneo
Содержание

Учебник javascript

Основные элементы языка

Сундучок с инструментами

Интерфейсы

Все об AJAX

Оптимизация

Разное

Дерево всех статей

Популярные таги
Последние комментарии
Последние темы на форуме
Forum