nagon.net - бесплатная поставка трафика на ваши сайты
Логин:
Пароль:
Регистрация





Убрать рекламу с сайта чтобы не мешала!

Печатающийся текст на экране 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 j=0;j<arguments.length;j++) {
if(typeof arguments[j] == 'string') {
txt = arguments[j];
}
if(typeof arguments[j] == 'boolean') {
key = arguments[j];
}
if(typeof arguments[j] == 'number') {
if(k) {
k=false;
smin = arguments[j];
}
else {
smax = arguments[j];
}
}
}

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();


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

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

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

Сделайте потише звук - играет музон
http://learn.javascript.ru/play/M7Zhkb

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

Вас зовут:

Ваш комментарий:


Код на картинке: