Nội dung
Trước hết, tớ tất cả chúng ta sẽ tạo một file Html, có gồm có thư viện Jquery :… body toàn thân > div id = ” main ” > div > body toàn thân > … Để cho ngầu thì không hề thiếu được style, ở đây mình sẽ làm đơn thuần thôi, chỉ cần font chữ, màu chữ, background là xong :html { color : # 00FF00 ; background-color : black ; font-family : monospace ; font-weight : 500 ; font-size : 14 px ; } Nhúng css vào file index.html vừa được tạo :… head > … link href = ” index.css ” rel = ” stylesheet ” type = ” text / css ” / > … head > … Bắt tay vào việc chính, tất cả chúng ta sẽ giải quyết và xử lý logic, lắng nghe sự kiện mỗi khi người dùng nhấn phím. Tớ sẽ tạo một file JS, thứ nhất là khởi tạo object chứa những thuộc tính và phương pháp thiết yếu nhé :USD ( function ( ) { $ ( document ). keydown ( function ( sự kiện ) { Typer. addText ( sự kiện ) ; } ) ; } ) ; const Typer = { text : null, index : 0, / / vị trí con trỏ hiện tại speed : 5, / / vận tốc gõ, mặc định là 5 ký tự mỗi khi nhấn file : ” “, / / tên file code sẽ được sử dụng init : ( ) => { }, content : ( ) => { }, write : str => { }, addText : key => { }, updateLastChar : ( ) => { }, / / phần này tất cả chúng ta sẽ sử dụng để tạo hiệu ứng cursor blink cho giống terminal } Tiếp tục, tớ sẽ định nghĩa 1 số ít biến để dùng chung :const main = ” # main ” ; / / id của thẻ div mà tất cả chúng ta sẽ hiển thị code / / regex sẽ dùng cho việc replace chuỗiconst newLineRegex = new RegExp ( ” \ n “, ” g ” ) ; / / dòng mớiconst spaceRegex = new RegExp ( ” \ \ s “, ” g ” ) ; / / khoảng chừng trắngconst tabRegex = new RegExp ( ” \ \ t “, ” g ” ) ; / / tab / / keycode list, bạn hoàn toàn có thể tìm hiểu thêm ở trang http://gcctech.org/csc/javascript/javascript_keycodes.htmconst keyCode = { backspace : 8, f11 : 122 } ; Trong hàm init ( ) tất cả chúng ta sẽ khởi tạo object, set thời hạn hiển thị cursor blink và đọc file code :
const Typer = { … init: () => { setInterval(function() { Typer.updateLastChar(); }, 500); // đặt thời gian cho blink cursor $.get(Typer.file, function(data) { Typer.text = data; // lưu nội dung file code }); }, …}Tiếp đến là đọc nội dung đã được hiển thị trên trang html:
const Typer = { …
Bạn đang xem: Hackertyper là gì
Xem thêm: Vẻ Đẹp Hà Giang Những Ngày Chìm Trong Mây, Hà Giang Những Ngày Chìm Trong Mây
Xem thêm: Những Địa Điểm Vui Chơi Ở Bangkok Thái Lan Đẹp Và Nổi Tiếng Nhất
content: () => $(main).html(), …}Xử lý text tạo hiệu ứng cursor blink:
const Typer = { … write : str => { $ ( main ). append ( str ) ; return false ; }, … updateLastChar : ( ) => { / / blinking cursor const cont = Typer. content ( ) ; / / nếu ký tự ở đầu cuối là blink cursor if ( cont.substring ( cont.length – 1, cont.length ) = = ” | ” ) { const tempText = $ ( main ). html ( ). substring ( 0, cont.length – 1 ) ; USD ( main ). html ( tempText ) ; / / xóa blink cursor } else { Typer. write ( ” | ” ) ; / / ngược lại, hiển thị blink cursor } } } Okay, tới phần thêm text mỗi khi người dùng nhấn phím nhé :const Typer = { … addText : key => { if ( Typer. text ) { const cont = Typer. content ( ) ; / / nội dung đã được in ra / / nếu nội dung ở đầu cuối là blinking cursor if ( cont.substring ( cont.length – 1, cont.length ) = = ” | ” ) { $ ( main ). html ( USD ( main ). html ( ). substring ( 0, cont.length – 1 ) ) ; / / xóa chuỗi có gồm có blink cursor } / / đặt lại index đến vị trí sau cuối if ( key. keyCode ! = keyCode. backspace ) Typer. index + = Typer. speed ; else { / / nếu index lớn hơn 0 và keycode là backspace thì index – speed if ( Typer. index > 0 ) Typer. index – = Typer. speed ; } let newText = $ ( main ). text ( Typer. text.substring ( 0, Typer. index ) ). html ( ) ; / / update text mới newText = newText. replace ( newLineRegex, ” ” ) / / nếu text có gồm có xuống dòng thì chuyển thành. replace ( tabRegex, ” ” ) / / nếu là tab thì thêm 4 khoảng chừng trắng. replace ( spaceRegex, ” ” ) ; / / nếu là khoảng chừng trắng thì thay bằng non-breaking space USD ( main ). html ( newText ) ; / / in nội dung mới ra màn hình hiển thị window. scrollBy ( 0, 50 ) ; / / scroll để màn hình hiển thị luôn hiển thị text mới } / / cho phép phóng to màn hình hiển thị if ( key. preventDefault và và key. keyCode ! = keyCode. f11 ) { key. preventDefault ( ) ; } if ( key. keyCode ! = keyCode. f11 ) { key. returnValue = false ; } }, … } Bây giờ, file index.js của tất cả chúng ta sẽ trông như thế này :/ * * Code được tìm hiểu thêm trên trang của Hackertyper. com * / const main = ” # main ” ; const newLineRegex = new RegExp ( ” \ n “, ” g ” ) ; / / dòng mớiconst spaceRegex = new RegExp ( ” \ \ s “, ” g ” ) ; / / khoảng chừng trắngconst tabRegex = new RegExp ( ” \ \ t “, ” g ” ) ; / / tabconst keyCode = { backspace : 8, f11 : 122 } ; USD ( function ( ) { $ ( document ). keydown ( function ( sự kiện ) { Typer. addText ( sự kiện ) ; } ) ; } ) ; const Typer = { text : null, index : 0, / / vị trí con trỏ hiện tại speed : 5, / / vận tốc gõ, mặc định là 5 ký tự mỗi khi nhấn file : ” “, init : ( ) => { setInterval ( function ( ) { Typer. updateLastChar ( ) ; }, 500 ) ; / / đặt thời hạn cho blink cursor USD. get ( Typer. file, function ( data ) { Typer. text = data ; / / lưu nội dung file code } ) ; }, content : ( ) => $ ( main ). html ( ), write : str => { $ ( main ). append ( str ) ; return false ; }, addText : key => { if ( Typer. text ) { const cont = Typer. content ( ) ; / / nội dung đã được in ra / / nếu nội dung ở đầu cuối là blinking cursor if ( cont.substring ( cont.length – 1, cont.length ) = = ” | ” ) { $ ( main ). html ( USD ( main ). html ( ). substring ( 0, cont.length – 1 ) ) ; / / xóa chuỗi có gồm có blink cursor } / / đặt lại index đến vị trí ở đầu cuối if ( key. keyCode ! = keyCode. backspace ) Typer. index + = Typer. speed ; else { / / nếu index lớn hơn 0 và keycode là backspace thì index – speed if ( Typer. index > 0 ) Typer. index – = Typer. speed ; } let newText = $ ( main ). text ( Typer. text.substring ( 0, Typer. index ) ). html ( ) ; / / update text mới newText = newText. replace ( newLineRegex, ” ” ) / / nếu text có gồm có xuống dòng thì chuyển thành. replace ( tabRegex, ” ” ) / / nếu là tab thì thêm 4 khoảng chừng trắng. replace ( spaceRegex, ” ” ) ; / / nếu là khoảng chừng trắng thì thay bằng non-breaking space USD ( main ). html ( newText ) ; / / in nội dung mới ra màn hình hiển thị window. scrollBy ( 0, 50 ) ; / / scroll để màn hình hiển thị luôn hiển thị text mới } / / cho phép phóng to màn hình hiển thị if ( key. preventDefault và và key. keyCode ! = keyCode. f11 ) { key. preventDefault ( ) ; } if ( key. keyCode ! = keyCode. f11 ) { key. returnValue = false ; } }, updateLastChar : ( ) => { / / blinking cursor const cont = Typer. content ( ) ; / / nếu ký tự ở đầu cuối là blink cursor if ( cont.substring ( cont.length – 1, cont.length ) = = ” | ” ) { const tempText = $ ( main ). html ( ). substring ( 0, cont.length – 1 ) ; USD ( main ). html ( tempText ) ; / / xóa blink cursor } else { Typer. write ( ” | ” ) ; / / ngược lại, in blink cursor } } } ; Cuối cùng là khởi tạo object Typer và truyền code mẫu zôtyperhacker – code.txt – index.css – index.html – index.js – jquery.min. jsTiến hành chạy thử, để tránh lỗi Cross-Origin Request Blocked : The Same Origin Policy disallows reading the remote resource at file : / / / home / bach / Desktop / project / hackertyper / code.txt. ( Reason : CORS request not http ), tớ sẽ tự tạo localhost cho nó bằng lệnh php – S localhost : 8000. Mở trình duyệt => truyền url http://localhost:8000/ => enjoy : v
Bạn có thể nghịch nó trên link này: https://bachfl2w.github.io.
Xem thêm: Đầu số 0127 đổi thành gì? Chuyển đổi đầu số VinaPhone có ý nghĩa gì? – http://139.180.218.5
Github : https://github.com/BachFl2w/hackertyperTổng kếtTổng kếtHiện chưa có bản cho mobile, bạn vui mắt truy vấn bằng máy tính và thưởng thức ) ). Trên đây là bài viết hướng dẫn tự tạo một trang giống như hackertyper, kỳ vọng giúp ích cho việc tán gái của bạn Happy coding
Source: http://139.180.218.5
Category: Thuật ngữ đời thường