Hãy đăng ký thành viên để có thể dễ dàng trao đổi, giao lưu và chia sẻ về kiến thức đồ họa.

  1. Hãy đăng ký subscribe kênh Youtube mới của Việt Designer tại địa chỉ: Youtube.com/VietDesignerChannel để theo dõi các video về thiết kế đồ họa. Do trước đó kênh cũ bị Youtube quét không rõ lý do, trong thời gian chờ kháng cáo nếu các bạn thấy video trên diễn đàn bị die không xem được thì có thể vào kênh mới để tìm xem video sơ cua nhé.
    Loại bỏ thông báo

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

Chủ đề thuộc danh mục 'HTML - CSS - JS - PHP - ASP' được đăng bởi boyplay, 29/8/12.

Lượt xem: 15,217

  1. boyplay Thành viên cấp 3

    1 . Giới Thiệu

    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 khi tìm hiểu cách làm các bạn có thể xem một demo đơn giản ở đây:

    Xem demo

    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: sstring.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)
    PHP:
    <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ó.

    PHP:
    <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.
    PHP:
    <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à ỉn 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

    PHP:
    <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:
    PHP:
    <!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>

    ...

    Xem thêm các chủ đề cùng chuyên mục

    Facebook Group Việt Designer
    Tham gia nhóm
    Facebook Fanpage Việt Designer
    Thích trang
    boyplay, 29/8/12
    #1
    JusTa Khôi, A3ersxSOnes, Dinh Cuong và 5 người khác thích bài viết này.
  2. Phạm Hữu Dư

    Phạm Hữu Dư phamhuudu.com Ban quản trị

    Windowsz.net lập ra đc 3 năm rồi àh? Mà ko phải do cậu lập ra sao?
    Phạm Hữu Dư, 30/8/12
    #2
  3. boyplay

    boyplay Thành viên cấp 3

    À. TỚ cũng là mem lang thang Google rồi bik thôi. Hùi mới bik cũng mới thành lập như 4rum mình này. Cái rùi gắn bó lâu h thành quản lý lun cái site T_T
    boyplay, 30/8/12
    #3
  4. Bảo Trần

    Bảo Trần Thành viên cấp 2

    hay nè.! cái này làm tặng người yêu được.! hehe :-bd
    Bảo Trần, 15/2/14
    #4
  5. King ThànhAn

    King ThànhAn Phụ trách offline miền Bắc

    boyplay làm sao đc cái link giống demo thế bác :D
    e amater đang mày mò làm web :D
    King ThànhAn, 7/7/14
    #5
  6. JusTa Khôi

    JusTa Khôi Thành viên cấp 3

    Chúng nó hay lấy cái này làm index hắc cờ :))
    JusTa Khôi, 7/7/14
    #6
  7. duydung1994bc

    duydung1994bc Mới đăng kí

    Ad cho hỏi mình có thể thay dấu "+" bằng dấu gạch dưới "_" để gõ chữ được không?
    duydung1994bc, 12/7/14
    #7
  8. Nguyễn Đắc Mạnh

    Nguyễn Đắc Mạnh Mới đăng kí

    #7 được bạn à
    Nguyễn Đắc Mạnh, 12/7/14
    #8
  9. Trương Quang

    Trương Quang Mới đăng kí

    Mình muốn khi xuống dòng thì nó xoá dữ liệu dòng trên đi thì phải làm sao ạ?
    Trương Quang, 30/3/16
    #9
  10. mrsontg

    mrsontg Mới đăng kí

    hay nè.! cái này làm tặng người yêu được.! hehe
    mrsontg, 28/7/16
    #10

Ủng hộ diễn đàn