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.
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);}
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;
}
Đặ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">
Đặt đoạn code HTML sau vào thẻ <body>:
<div id="tw"></div>