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

WebP là gì? Hướng dẫn cách để chuyển hình ảnh jpg, png qua webp

WebP là gì? WebP là một định dạng ảnh hiện đại, được phát triển bởi Google

Điểm khác biệt giữa IPv4 và IPv6 là gì?

IPv4 và IPv6 là hai phiên bản của hệ thống địa chỉ Giao thức Internet (IP). IP l

Check nameservers của tên miền xem website trỏ đúng chưa

Tìm hiểu cách check nameservers của tên miền để xác định tên miền đó đang dùn

Mình đang dùng Google Domains để check tên miền hàng ngày

Từ khi thông báo dịch vụ Google Domains bỏ mác Beta, mình mới để ý và bắt đầ