Giới thiệuGiới thiệuXin chào, lại là tớ đây, hồi còn đi học có biết được một trang sống ảo cho những bạn thích làm hacker, đó là hackertyper.com và cộng thêm những bộ phim tương quan đến những hacker đỉnh vờ lờ, trong lòng tớ nhen nhóm dự tính, sau này lớn lên, tớ sẽ trở thành một hacker, chuyên hack Facebook, sửa quạt, sửa TV, … bla bla. Rồi tớ cũng đã theo con đường lập trình, thao tác cho Sun * tính cả từ lúc thực tập đến giờ cũng đã 1 năm rưỡi rồi, nhưng không biết hack FB đành phải sống ảo, tự code lấy một trang nhìn cho ngầu lấy ý tưởng sáng tạo dựa trên hackertyper.com, bắt tay vào code nào )Nội dung

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.

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