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. Hướng dẫn 1 Lưu đoạn code sau thành file có tên tt...
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.
Hướng dẫn
- 1Lư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);} - 2Lư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>
No comments: