Печатающийся текст на 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
|
Слушайте много интересных и занимательных фильмов по радио бесплатно на сайте online rádió
Roksa kędzierzyn
Roksa ogrodzieniec
In fact, I've been looking for information of this kind. I appreciate you writing this article. io games
Отправить комментарий
Приветствуются комментарии:- Полезные.
- Дополняющие прочитанное.
- Вопросы по прочитанному. Именно по прочитанному, чтобы ответ на него помог другим разобраться в предмете статьи. Другие вопросы могут быть удалены.
P.S. Лучшее "спасибо" - не комментарий, как все здорово, а рекомендация или ссылка на статью.Для остальных вопросов и обсуждений есть форум.