Gõ css

1. Giới thiệu

Chào các bạn, hôm nay mình sẽ chia sẻ với các bạn cách làm hiệu ứng gõ chữ (hiệu ứng gõ chữ), một hiệu ứng khá thú vị và cũng rất đơn giản bằng Javascript Trước khi .

Xem demo

Lưu ý. 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 để dễ hiểu hơn. http. //www. w3schools. com/html/thử. asp?filename=tryhtml_basic

1. Tri thức cần phải có

to have been effect as on we need to quan tâm tới hai phương thức của javascript đó là

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

Hàm thứ nhất. chuỗi. chuỗi con(từ, tới) trả về chuỗi con của chuỗi từ vị trí “từ” tới trước vị trí “đến” (bắt đầu từ 0)
PHP.
<script language="javascript"> str="Windowsz.net"; document.write(str.substr(5,12)) script>
Đầu ra. wsz. net

Hàm thứ 2. setTimeout(code,millisec,lang) - Hàm này có tác dụng trì hoãn 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 sử dụng ngôn ngữ khác “javascript” nó được sử dụng để định nghĩa ngôn ngữ của “mã”, ví dụ như VBScript. Vì 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>
Đầu ra. Các bạn sẽ thấy “Tin nhắn đầu tiên” hiện ra trước và “Tin nhắn thứ hai” hiện ra sau đó 0. 3 seconds, cho dù “Tin nhắn thứ hai” được gọi trước nhưng nó bị trì hoãn 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>
Đầu ra. Tương tự các bạn sẽ thấy “i=3″ hiện ra trước và “đặt i=7″ hiện ra sau

2. Thuật toán

Giả sử chúng ta có một chuỗi muốn thiết lập hiệu ứng nhập chữ Ví dụ. str=”Windowsz″
Thứ nhất. Chúng ta sẽ sử dụng hàm substring() để cắt từng chữ cái trong chuỗi và chỉ trên màn hình (Giống hồi nhỏ viết pascal làm hiệu ứng chữ chạy như vậy). thứ hai. Chúng ta sẽ sử dụng hàm setTimeout() để trì hoãn công việc cắt chữ đó lại để giống với cảm giác chữ đang được nhập ra như 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>

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

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 Documenttitle> 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'+ '---------------- '+ 'Diễn đàn hỗ trợ người dùng Windows và IT Việt '+ ' Thành lập vào ngày 13/10/2009'+ ' Người sáng lập: Nguyễn Hải Dương '+ ' Nickname: haiduong '+ ' Gender: Male '+ ' Birthday: 05/08/1986 '+ ' Location: Hà Nội ' 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>

programming css

Gõ css

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội