Выделить всё
<html>
<title>Печатающая машинка - ukrainsky.su</title>
</html>
<body>
<style>
body{background:#000;color:#fff}
#text span:last-child{color:#888} // Подсветка последнего символа
</style>
<div id="text"></div>
<script>
var TIMER = 100; // Таймер для каждой буквы (в милисекундах)
var cont = 1; // Continue - Своеобразное разрешение на печать нового выражение
var TIMERS = 900; // Пауза перед каждым новым выражением
var clear = 1; // Чистить ли объект перед каждым новым выражением (1 - да, 0 - нет)
function printW(c, o, i, l) { // Функция печати слова
/*
c - слово, которое необходимо напечатать
o - объект, куда печатать
i - шаг
l - длина слова
*/
document.getElementById(o).innerHTML += '<span>'+ c[i] + '</span>';
i++;
if (i < l) {
setTimeout (
function(){
printW (c, o, i, l)
},
TIMER);
window.cont = 0; // Запрещаем нового выражения, ибо печатается текущее
}
else { // Текущее слово было распечатано
document.getElementById(o).innerHTML += '<span> </span>'; // Снимаем подсветку с последнего символа
setTimeout (
function () {
window.cont = 1; // Разрешаем печатать следующее выражение
}, TIMERS);
}
return true;
}
function printClear (o) { // Функция очистки поля
document.getElementById(o).innerHTML = '';
}
function prints (c, o, i, l) { // Функция для печати нескольких выражений
var ll = 0; // Длина одного выражения
var n = 0;
setInterval (function(){
if (n == l) return false; // Выходим когда вывели все выражения
if (window.cont == 1) {
if (window.clear == 1) printClear (o);
ll = c[n].length;
printW(c[n], o, i, ll);
n++;
window.cont = 0;
}
}, 100);
}
function printWords (c, o) { // Main()
/*
c - слово, которое необходимо напечатать
o - объект, куда печатать
*/
var w = 0;
var l = c.length; // Выражений / Объектов в массиве
i = 0;
if (l > 1) {
prints (c, o, i, l);
}
else {
l = c[0].length; // Длина выражения
printW (c[0], o, i, l);
}
return true;
}
printWords (['Привет!', 'Я печатающая машинка!', 'Хочешь узнать как я устроена?', 'Открывай статью: http://ukrainsky.su/news/23'], 'text');
</script>
</body>
</html>