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

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

  1. boyplay

    boyplay Thành viên cấp 2

    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.lengthsetTimeout("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.lengthsetTimeout("type()",80);
    }
    </script>
    <body onload="type()">
    <div id="scr"></div>
    </body>
     
    </html>
     
    Hưng Trần Văn, Phạm Hữu DưDung Jin thích bài viết này.
  2. Việt Nét

    Việt Nét Administrator Staff Member

    Windowsz.net lập ra đc 3 năm rồi àh? Mà ko phải do cậu lập ra sao?
     
  3. boyplay

    boyplay Thành viên cấp 2

    À. 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
     
  4. diogini1ahangchuoi

    diogini1ahangchuoi Thành viên cấp 1

    [​IMG]



    Nói đến nước Ý, ta có thể tưởng tượng ra ngay xứ sở của làng thời trang quý ông đậm chất cổ điển. Cũng như khi nhìn vào đôi giày 20790 này, ta có thể dễ dàng đoán được quê hương Italy qua chất liệu và họa tiết trên thân giày.
    Họa tiết Swing quen thuộc của những đôi giày da trên dáng giày Oxford cổ điển không tạo nên một đôi giày quá cầu kì kiểu cách nhưng lại tinh tế, hút mắt vừa đủ.
    Sắc đen trên chất liệu da bò cao cấp cho cảm nhận khác hoàn toàn. Sự phối hợp của sắc đen hiện đại cùng với họa tiết Swing cổ điển đã tạo nên điểm nhấn cho đôi giày Thời Thượng giữa muôn nghìn những đôi giày Tây ngày nay.
    Thiết kế lót và đế hoàn toàn bằng da tạo cho đôi chân cảm giác luôn được nâng niu và đặc biệt là hiệu ứng thông thoáng khử mùi chỉ có độc nhất trên những đôi giày da cao cấp hoàn hảo.


    [​IMG]

    Hình ảnh minh họa cho cách kết hợp đồ đẹp mắt

    Xem thêm nhiều mẫu giày đẹp hơn tại diogini - giày ý hàng hiệu

    nhé
     

Ủng hộ diễn đàn