Hackertyper là gì

  -  
Giới thiệu

Xin kính chào, lại là tớ trên đây, hồi còn tới trường có hiểu rằng một trang sống ảo cho các bạn thích làm hacker, đó là hackertyper.com và thêm vào đó hầu hết bộ phim truyền hình tương quan đến các hacker đỉnh vờ lờ, trong trái tim tớ nhen team ý định, sau đây Khủng lên, tớ vẫn đổi thay một hacker, chăm haông chồng Facebook, sửa quạt, sửa TV, ... bla bla. Rồi tớ đã và đang theo tuyến đường thiết kế, thao tác mang lại Sun* tính cả từ thời gian thực tập tới giờ đồng hồ đã và đang 1 năm rưỡi rồi, cơ mà lưỡng lự hack FB đành yêu cầu sinh sống ảo, tự code rước một trang quan sát mang lại ngầu đem ý tưởng dựa vào hackertyper.com, hợp tác vào code nào )

Nội dung

Trước hết, tớ bọn họ sẽ tạo một file Html, tất cả bao hàm tlỗi viện Jquery:

...body> div id="main">div>body>...Để mang đến ngầu thì luôn luôn phải có được style, tại đây bản thân vẫn làm cho dễ dàng và đơn giản thôi, chỉ việc font text, màu chữ, background là xong:

html color: #00FF00; background-color: black; font-family: monospace; font-weight: 500; font-size: 14px;Nhúng css vào tệp tin index.html vừa mới được tạo:

...head> ... link href="index.css" rel="stylesheet" type="text/css" /> ...head>...Bắt tay vào câu hỏi bao gồm, chúng ta đã giải pháp xử lý súc tích, lắng nghe sự khiếu nại mỗi một khi người tiêu dùng thừa nhận phím. Tớ sẽ tạo nên một tệp tin JS, trước tiên là khởi chế tạo ra object chứa các nằm trong tính và phương thức quan trọng nhé:

$(function() $(document).keydown(function(event) Typer.addText(event); ););const Typer = text: null, index: 0, // địa chỉ nhỏ trỏ bây giờ speed: 5, // vận tốc gõ, khoác định là 5 ký kết từ bỏ mỗi lúc dấn file: "", // tên tệp tin code sẽ tiến hành áp dụng init: () => , content: () => , write: str => , addText: key => , updateLastChar: () => , // phần này bọn họ sẽ sử dụng nhằm sản xuất hiệu ứng cursor bliên kết mang lại giống như terminalTiếp tục, tớ đã tư tưởng một số trong những đổi mới nhằm sử dụng chung:

const main = "#main"; // id của thẻ div nhưng chúng ta sẽ hiển thị code// regex sẽ cần sử dụng mang đến bài toán replace chuỗiconst newLineRegex = new RegExp(" ", "g"); // loại mớiconst spaceRegex = new RegExp("\s", "g"); // khoảng tầm trắngconst tabRegex = new RegExp("\t", "g"); // tab// keycode danh sách, chúng ta 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() bọn họ sẽ tạo object, set thời gian hiển thị cursor blinks và đọc file code:

const Typer = ... init: () => setInterval(function() Typer.updateLastChar(); , 500); // đặt thời gian mang đến blinks cursor $.get(Typer.file, function(data) Typer.text = data; // lưu giữ nội dung file code ); , ...Tiếp mang đến là hiểu ngôn từ đã đượ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 chế tác hiệu ứng cursor blink:

const Typer = ... write: str => $(main).append(str); return false; , ... updateLastChar: () => ") const tempText = $(main) .html() .substring(0, cont.length - 1); $(main).html(tempText); // xóa bliên kết cursor else Typer.write(" 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) ") $(main).html( $(main) .html() .substring(0, cont.length - 1) ); // xóa chuỗi có bao hàm blink cursor // đặt lại index cho địa điểm cuối cùng if (key.keyCode != keyCode.backspace) Typer.index += Typer.speed; else // trường hợp index lớn hơn 0 với 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 new newText = newText .replace(newLineRegex, "") // ví như text gồm bao gồm xuống cái thì đưa thành .replace(tabRegex, "") // nếu như là tab thì thêm 4 khoảng chừng trắng .replace(spaceRegex, ""); // nếu là khoảng chừng trắng thì thế bằng non-breaking space $(main).html(newText); // in ngôn từ bắt đầu ra màn hình hiển thị window.scrollBy(0, 50); // scroll để screen luôn hiển thị text new // được cho phép pngóng khổng lồ màn hình hiển thị if (key.preventDefault && key.keyCode != keyCode.f11) key.preventDefault(); if (key.keyCode != keyCode.f11) key.returnValue = false; , ...Bây giờ, file index.js của bọn họ vẫn trông như thế này:

/* * Code được tìm hiểu thêm bên trên trang của Hackertyper.com */const main = "#main";const newLineRegex = new RegExp(" ", "g"); // cái mớiconst spaceRegex = new RegExp("\s", "g"); // khoảng tầm trắngconst tabRegex = new RegExp("\t", "g"); // tabconst keyCode = backspace: 8, f11: 122;$(function() $(document).keydown(function(event) Typer.addText(event); ););const Typer = text: null, index: 0, // vị trí con trỏ hiện nay speed: 5, // vận tốc gõ, khoác định là 5 ký từ mỗi lúc thừa nhận file: "", init: () => setInterval(function() Typer.updateLastChar(); , 500); // đặt thời hạn đến blink cursor $.get(Typer.tệp tin, function(data) Typer.text = data; // giữ câu chữ file code ); , content: () => $(main).html(), write: str => $(main).append(str); return false; , addText: key => if (Typer.text) const cont = Typer.content(); // câu chữ đã có được in ra // nếu như nội dung sau cuối là blinking cursor if (cont.substring(cont.length - 1, cont.length) == " // cho phép pđợi to screen if (key.preventDefault && key.keyCode != keyCode.f11) key.preventDefault(); if (key.keyCode != keyCode.f11) key.returnValue = false; , updateLastChar: () => // blinking cursor const cont = Typer.content(); // giả dụ ký trường đoản cú sau cùng là bliên kết cursor if (cont.substring(cont.length - 1, cont.length) == ";Cuối cùng là khởi tạo object Typer với truyền code mẫu zô

typerhacker - code.txt - index.css - index.html - index.js - jquery.min.jsTiến hành chạy demo, nhằm tách 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ẽ trường đoản cú tạo thành localhost mang lại nó bởi lệnh php -S localhost:8000. Msinh hoạt trình chuẩn y => truyền url http://localhost:8000/ => enjoy :v

Quý khách hàng rất có thể nghịch nó trên links này: https://bachfl2w.github.io.

Github: https://github.com/BachFl2w/hackertyper

Tổng kết

Hiện chưa tồn tại bạn dạng mang lại di động, chúng ta vui tươi truy cập bằng laptop cùng tận hưởng )) . Trên đó là bài viết chỉ dẫn từ bỏ tạo thành một trang giống hệt như hackertyper, mong muốn mang lại lợi ích mang lại câu hỏi tán gái của doanh nghiệp Happy coding

*