Hướng dẫn hiển thị console của Facebook cho website

Hoàng Anh

Ban Quản Trị
Tham gia
1/2/17
Bài viết
21
Xếp hạng
16
#1


:IF:​
Chào mọi người, chắc hản ai vào phần console của mạng xã hội Facebook đều thấy có một phần cảnh báo vô cùng đôc và lạ, vậy làm sao để làm được như vậy. Rất đơn giản, chúng ta chỉ cần áp dụng một ít kiến thức về phần "Javascript" là được, không vòng vo nữa, bây giờ chúng ta sẽ đi vào phần chính.

Demo tại đây :e3:
:tt:​
Bước 1: Như bình thường, ta sẽ tạo cấu trúc html cơ bản.

HTML:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Itrum</title>
</head>
<body>
</body>
</html>
Bước 2: In ra phần console của dev tool bằng lệnh: console.log(); đặt trong cặp thẻ "script"
Giải thích:
  • Bên trong phần ngoặc () của console.log(); là những gì muốn in ra màn hình bằng text
  • Các text đó phải bao bọc bởi dấu ngoặc kép '' hoặc ""
  • Trước các text ta cần thêm lênh: %c để trình duyệt nhận định phần tử cần style
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Itrum</title>
</head>
<body>
    <script>
        console.log("%cDừng Lại!");
        console.log("%cĐây là một tính năng của trình duyệt dành cho các nhà phát triển. Nếu ai đó bảo bạn sao chép-dán nội dung nào đó vào đây để bật một tính năng của Website thì đó là hành vi lừa đảo.");
    </script>
</body>
</html>
Bước 3: Đây sẽ là bước style cho các phần tử trước, ta sẽ style theo cách sau.
  1. Tạo một biến và style dưới dạng css như bình thường, biến tạo như sau: var tên_biến = "css";
  2. Sau khi khai báo biến hoàn tất, ta lấy tên biến đặt sau phần text ở console.log(); và ngăn cách chúng bằng dấu phẩy "," dạng như sau: console.log("một_vài_text", tên_biến);

HTML:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Itrum</title>
</head>
<body>
    <script>
        var stop = "color: #f00; font-size: 45px; font-weight: 700; font-family: sans-serif; text-shadow: 0px 0px 1px #000;";
        var main = "color: #222; font-size: 14px; font-weight: 500; font-family: sans-serif";
        console.log("%cDừng Lại!", stop);
        console.log("%cĐây là một tính năng của trình duyệt dành cho các nhà phát triển. Nếu ai đó bảo bạn sao chép-dán nội dung nào đó vào đây để bật một tính năng của Website thì đó là hành vi lừa đảo.", main);
    </script>
</body>
</html>
Chúc các bạn thành công!
 

Thành viên trực tuyến

Không có thành viên trực tuyến.

Group TechViews

Chủ Đề Tương Tự

Thống kê diễn đàn

Chủ đề
1,407
Bài viết
2,939
Thành viên
6,532
Thành viên mới nhất
maygiatlg
Top Bottom