CuDemVN.Wap.Sh

- 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ữ

Admin* 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>

Chúc các bạn thành công!

Nguồn: Nguyễn Hải Dương
↓ Tập tin Đính kèm ↓
↑↑ Lượt xem: 301
score
Đánh giá: 4.5/ 5, 301 bình chọn
- Chia sẻ:G  T
BBCode:

Link:
+ Còn “nhiều” Lắm!
+

Share code Diễn đàn trên Xtgem Full chức năng cực chất GetSmile.Mobie.In bởi Cú Đêm Việt Nam

+

Share code PHP hiển thị thông tin khách đang online trên Site

+

Sử dụng HTML và CSS tạo hiệu ứng hiển thị mô tả khi di chuột vào hình ảnh

+

Ajax là gì? Hướng dẫn code cơ bản khi xử lý dữ liệu với jQuery Ajax

+

Share full code PHP bộ tool cài đặt và quản lý Filelist KhoTruyen365 Xtgem

Trang chủ Cú Đêm Việt Nam Trang Chủ[1-1-301]

Old school Swatch Watches