Vài thứ hay ho với website bằng JavaScript

Để học một ngôn ngữ lập trình cách hiệu quả tốt nhất là hãy thực hành, hãy làm và tìm hiểu nó. Ở đây bạn sẽ học một số cách hữu ích của JavaScript trong vòng 30 phút, nó sẽ giúp bạn cách học hiệu quả hơn. Hãy sử dụng câu lệnh trên trình console.log()

Để học một ngôn ngữ lập trình cách hiệu quả tốt nhất là hãy thực hành, hãy làm và tìm hiểu nó. Ở đây bạn sẽ học một số cách hữu ích của JavaScript trong vòng 30 phút, nó sẽ giúp bạn cách học hiệu quả hơn.

Hãy sử dụng câu lệnh trên trình console.log() bằng cách sử dụng phím F12 hoặc Chuột phải > Inspect, ngoài ra bạn cũng thể tổ hợp phím Ctrl + Shift + I.

Sử dụng hàm alert()

Đôi khi bạn sử dụng alert() để gỡ lỗi, trình duyệt sẽ bật lên một hộp thoại nhỏ.

alert('ĐANG TRONG QUÁ TRÌNH!!! ^%$(&&* LOADING... ');

Sử dụng Math.random()

Đoạn code sau rất thú vị khi bạn sử dụng nó, bằng cách chọn tất cả thẻ div, p, span, img, abody sau đó sử dụng Math.random() thay đổi góc nhìn của một trang web với rotate.

Array.prototype.slice.call(
  document.querySelectorAll(
    'div,p,span,img,a,body')).map(function(tag){
    tag.style['transform'] = 'rotate(' + (
    Math.floor(Math.random() * 3) - 1) + 'deg)';
});

Thật là thú zị ha quý zị.

Sử dụng .style

Sử dụng style giúp cho giao diện và font chữ trang web trở lên độc đáo hơn =))

var allDivs = document.querySelectorAll('div');

for(var i = 0; i < allDivs.length; i++){
  allDivs[i].style['background-color'] = 'black';
  allDivs[i].style['color'] = 'green';
  allDivs[i].style['font-family'] = 'Monospace';
}

Thay đổi tất cả các hình ảnh thành hình chú chó

Thú zị ở đây là giúp cho bạn thấy được tất cả hình ảnh trên một trang web biến thành hình chú chó cute

Array.prototype.slice.call(
  document.querySelectorAll('img')).map(function(tag){
    tag.src = 'https://i.imgur.com/FRLvBQ9.jpg';
});

Bạn có thể thay đổi URL hình ảnh trên nhé 😘

Lật ngược trang web

Sử dụng hàm setTimeout của JavaScript, khi đấy người dùng cần phải kích hoạt sự kiện bằng cách di chuột trong vòng 5 giây. Khi sự kiện kích hoạt hiệu ứng sẽ được bật, cụ thể là sẽ lật ngược lại trang web.

setTimeout(function(){
 document.onmousemove = document.onkeypress = 
 function(){
     document.body.style['transition'] = 'transform 3s';
     document.body.style['transform'] = 'rotate(180deg)';
 }
}, 5000);

Mình hy vọng các bạn sẽ học được một số điều thú zị từ những bản hack JavaScript này!!!

Nguồn: viblo.asia

Bài viết liên quan

Thay đổi Package Name của Android Studio dể dàng với plugin APR

Nếu bạn đang gặp khó khăn hoặc bế tắc trong việc thay đổi package name trong And

Lỗi không Update Meta_Value Khi thay thế hình ảnh cũ bằng hình ảnh mới trong WordPress

Mã dưới đây hoạt động tốt có 1 lỗi không update được postmeta ” meta_key=

Bài 1 – React Native DevOps các khái niệm và các cài đặt căn bản

Hướng dẫn setup jenkins agent để bắt đầu build mobile bằng jenkins cho devloper an t

Chuyển đổi từ monolith sang microservices qua ví dụ

1. Why microservices? Microservices là kiến trúc hệ thống phần mềm hướng dịch vụ,