jQuery- hiệu ứng chữ đánh máy với thời gian thực

Đây là hiệu ứng nhã từng chữ lên màn hình, giống như kiểu người ta đang đánh máy với thời gian thực. Code này Tôi sưu tầm từ một site ấn độ. Theo tôi để có hiệu ứng đánh máy như thế này, bạn phải thêm thư viện jquery vào site thì có vẻ hơi "tốn đất". Bạn nên áp dụng thủ thuật này khi mà site đã có file jquery đang áp dụng cho tính năng khác. Như vậy để tận dụng jquery.

Những dòng chữ viết theo kiểu đánh máy!

Những dòng chữ viết theo kiểu đánh máy!

Những dòng chữ viết theo kiểu đánh máy!

Những dòng chữ viết theo kiểu đánh máy!

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<style>
.typewrite{ font-size: 20px;}
.typing-cursor{ position: relative; display: inline-block; width: 8px; text-indent: -999em; background: #ccc;}
</style>
<script>
$(document).ready(function(){
//get the content
var content = $('.typewrite').html();
//find the length of the content
var contentLength = content.length;
var char = 0;
$('.typewrite').html('<span class="typing-cursor">|</span>');
//Here is the function
(function typeFunc() {
//dynamic delay to get the typewriting feel
    var typingSpeed = Math.round(Math.random() * 120) + 60;
    setTimeout(function() {
        char++;
        var type = content.substring(0, char);
$('.typewrite').html(type + '<span class="typing-cursor">|</span>');
//recursive
        typeFunc();
    }, typingSpeed);
}());
});
</script>
<div class="typewrite">
  Những dòng chữ viết theo kiểu đánh máy! <br/>
  Những dòng chữ viết theo kiểu đánh máy! <br/>
  Những dòng chữ viết theo kiểu đánh máy! <br/>
  Những dòng chữ viết theo kiểu đánh máy! <br/>
</div>