GetSmile.Mobie.In - Diễn đàn chia sẻ Cú đêm Việt Nam

AiChat.Wap.Sh - Diễn đàn Xtgem Việt Nam

HamTruyen.Xtgem.Com - Blog Ham Truyện nơi hội tụ của những tín đồ mê truyện chữ

Trang chủ >> WapMaster

Tìm Kiếm → Thảo Luận

[JavaScript] Typing Effect - Giả lập hiệu ứng gõ chữ

RoSino18k

05-07-2016

Chào các bạn, hôm này mình sẽ chia sẻ với các bạn cách làm hiệu ứng gõ chữ (typing effect), một hiệu ứng khá thú vị và cũng rất đơn giản bằng JavaScript . Trước đó mình đã share cho các bạn code typeit gõ chữ tự động bằng jQuery, nay mình sẽ trình bày nó bằng JavaScript và giải thích nguyên lí hoạt động của hiệu ứng này.

Trước khi tìm hiểu cách làm các bạn có thể xem một demo đơn giản ở đây:

[JavaScript] Typing Effect - Giả lập hiệu ứng gõ chữ
[Tải ảnh]

Note Trong quá trình đọc bài viết các bạn có thể sử dụng tryit editor của w3c chạy thử code để hiểu hơn:

http://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic

1 . Kiến thức cần có

Để làm được hiệu ứng như trên chúng ta cần quan tâm tới hai methods của JavaScript đó là

string.substring(from, to)
setTimeout(code,millisec,lang)

Hàm thứ nhất: string.substring(from, to) trả về chuỗi con của string từ vị trí “from” tới trước vị trí “to” (bắt đầu từ 0)

<script language="javascript">

str="Windowsz.net";

document.write(str.substr(5,12))

</script>

Output: wsz.net

Hàm thứ 2: setTimeout(code,millisec,lang) - Hàm này có tác dụng delay thời gian thưc thi kết quả “code” sau “milisec” miliseconds. - Đối số “lang” là không bắt buộc, nếu dùng ngôn ngữ khác “javascript” nó dùng để định nghĩa ngôn ngữ của “code”, ví dụ như VBScript. Vậy chúng ta cũng không cần quan tâm đến nó.

<script language="javascript">

setTimeout("alert('The second message')",600);

setTimeout("alert('The first message')",300);

</script>

Output: Các bạn sẽ thấy “The first message” hiện ra trước, và “The second message” hiện ra sau đó 0.3 giây, cho dù “The second message” được gọi trước nhưng nó bị delay lâu hơn nên nó sẽ hiện ra sau.

<script language="javascript">

i=3;

function set(){

i=7;

alert('set i=7');

}

setTimeout("set()",300);

alert('i = '+i);

</script>

Output: Tương tự các bạn sẽ thấy “i=3″ hiện ra trước và “set i=7″ hiện ra sau

2 . Thuật toán

Giả sử chúng ta có một chuỗi muốn giả lập hiệu ứng gõ chữ Ví dụ: str=”Windowsz″
Thứ nhất: Chúng ta sẽ sử dụng hàm substring() để cắt lần lượt từng chữ trong chuỗi và in ra màn hình (Giống hồi nhỏ viết pascal làm hiệu ứng chữ chạy vậy). Thứ hai: Chúng ta sẽ dùng hàm setTimeout() để delay công việc cắt chữ đó lại để giống với cảm giác chữ đang được gõ ra vậy

<script language="javascript">

str="Windowsz";

document.write(str.substr(0,1));

count=0;

function type()

{

document.write(str.substring(count-1,count++));

if(count<=str.length) setTimeout("type()",200);

}

type();

</script>

Output: Các bạn sẽ thấy chữ “Windowsz″ được in ra lần lượt giống như được gõ ra vậy Như vậy các bạn có thể tùy biến theo cách của mình để tạo ra hiệu ứng đẹp hơn, quan trọng nhất là sử dụng được hàm setTimeout(code,millisec,lang)

Code hoàn chỉnh trong demo ở đầu bài:

<!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Transitional/EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Untitled Document</title>

< /head>

<style type="text/css">

body{

background-color:#000;

color:#0F0;

font-family:"Courier New";

font-weight:bold;

}

</style>

<script language="javascript">

cusor='+';

count=0;

mess='http://Windowsz.net<br />'+

'---------------- <br />'+

'Diễn đàn hỗ trợ người dùng Windows và IT Việt <br />'+

' Thành lập vào ngày 13/10/2009'+

' <br>Người sáng lập: Nguyễn Hải Dương <br /> '+

' Nickname: haiduong <br />'+

' Gender: Male <br />'+

' Birthday: 05/08/1986 <br />'+

' Location: Hà Nội <br/ >'

 

function type()

{

if (cusor=='+') cusor=' '; else cusor='+';

document.getElementById('scr').innerHTML=mess.substring(0,count++)+cusor;

if(count<=mess.length) setTimeout("type()",80);

}

</script>

<body onload="type()">

<div id="scr"></div>

</body>

 </html>