<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(function() {
setInterval(function() {
$('#blinker').toggleClass('blink');
}, 500)
var blinker = '<span id="blinker"> </span>'
$(blinker).appendTo( $('#text') );
var txt = [
' Люблю грозу в начале мая,',
' Когда весенний, первый гром,',
' как бы резвяся и играя,',
' Грохочет в небе голубом.',
'',
' Гремят раскаты молодые,',
' Вот дождик брызнул, пыль летит,',
' Повисли перлы дождевые,',
' И солнце нити золотит.',
'',
' С горы бежит поток проворный,',
' В лесу не молкнет птичий гам,',
' И гам лесной и шум нагорный -',
' Все вторит весело громам.',
'',
' Ты скажешь: ветреная Геба,',
' Кормя Зевесова орла,',
' Громокипящий кубок с неба,',
' Смеясь, на землю пролила.'
].join('\n');
var index = 0;
$(document).keydown(function() {
var rnd = Math.floor( Math.random()*2 + 1);
var newChars = txt.slice(index, index + rnd).replace(/\n/g, '<br>');
$('#text').html( txt.slice(0, index).replace(/\n/g, '<br>') + newChars + blinker);
index += rnd;
return false;
});
});
</script>
<style type="text/css">
.blink {
color: #FFF !important;
background: #20d23e; !important;
}
a:link { color: #203B89; text-decoration: underline; }
a:visited { color: #173077; text-decoration: underline; }
a:active { color: #aa0000; text-decoration: underline; }
a:hover { color: #ff0000; text-decoration: underline; }
body {text-align: left; background: #000; color: #FFF; font-size: 24px;
}
</style>
</head>
<body>
<div class="next" id="text"></div>
</body>
</html>