Trang chủ / Công nghệ / Lập trình / Javascript
loading...
02-05-2010 11:11

Cách hiển thị văn bản theo kiểu đánh máy(Typewriter Text)

 

Bài viết sẽ hướng dẫn các bạn lập trình web hiệu ứng văn bản hiển thị theo kiểu đánh máy.

1

Lưu đoạn code sau thành file có tên tt.js

var content = "Your typewriter text goes here";

function twDisplayTW() {twDisplay('tw',content,0);}
loaded('tw',twDisplayTW);

var brk = '~'; // character to use for line break
var resetTime = 0; // set to 0 to not reset or seconds to delay before reset

function twDisplay(id,content,num) {var delay = 140; if (num <= content.length)  {var lt = content.substr(0,num); document.getElementById(id).innerHTML = lt.replace(RegExp(brk,'g'),'<br \/>'); num++; if (num > content.length) delay = resetTime * 1000;} else {document.getElementById(id).innerHTML = ''; num = 0;} if (delay > 0) setTimeout('twDisplay("'+id+'","'+content+'","'+num+'")',delay);} var pageLoaded = 0; window.onload = function() {pageLoaded = 1;}; function loaded(i,f) {if (document.getElementById && document.getElementById(i) != null) f(); else if (!pageLoaded) setTimeout('loaded(\''+i+'\','+f+')',100);}
2

Lưu đoạn code css sau thành file tt.css

#tw {
width : 400px;
height : 460px;
border : 1px solid #000;
background-color :#ccc;
padding : 5px;
font-family : "courier new",courier,monospace;
font-size : 18px;
}
3

Đặt đoạn code sau vào thẻ <head> :

<script type="text/javascript" src="tt.js">

</script>

<link rel="stylesheet" href="tt.css" type="text/css">
4

Đặt đoạn code HTML sau vào thẻ <body>:

<div id="tw"></div>
Chia sẻ:
Từ khóa:
javascript đánh máy văn bản Typewriter Text

Bài cùng chủ đề

loading...

Bình luận

Danh mục

Xem nhiều

Bài mới