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

9 Mẹo lập trình Web “ẩn mình” giúp tiết kiệm hàng giờ đồng hồ

Hầu hết các lập trình viên (kể cả những người giỏi) đều tốn thời gian x

Can GPT-4o Generate Images? All You Need to Know about GPT-4o-image

OpenAI‘s GPT-4o, introduced on March 25, 2025, has revolutionized the way we create visual con

Khi nào nên dùng main, section, article, header, footer, và aside trong HTML5

HTML5 đã giới thiệu các thẻ ngữ nghĩa giúp cấu trúc nội dung web một cách có

So sánh Webhook và API: Khi nào nên sử dụng?

Trong lĩnh vực công nghệ thông tin và phát triển phần mềm, Webhook và API là hai th