Tạo danh sách random vị trí mỗi khi load trang

Trong bài viết này mình sẽ hướng dẫn cách làm thế nào để random tự động thứ tự các mục trong danh sách HTML mỗi khi tải lại trang. Đây chỉ là mẹo nhỏ để cho nội dung hiển thị với khách luôn mới mẻ.

Tạo danh sách cơ bản

Đầu tiên, chúng ta cần một danh sách HTML cơ bản như ví dụ sau:

<ul id="random-list">
  <li>Dòng thứ 1</li>
  <li>Dòng thứ 2</li>
  <li>Dòng thứ 3</li>
  <li>Dòng thứ 4</li>
  <li>Dòng thứ 5</li>
  <li>Dòng thứ 6</li>
  <li>Dòng thứ 7</li>
</ul>

Đoạn code sẽ hiển thị như sau

• Dòng thứ 1
• Dòng thứ 2
• Dòng thứ 3
• Dòng thứ 4
• Dòng thứ 5
• Dòng thứ 6
• Dòng thứ 7

JavaScript để thực hiện việc xáo trộn danh sách trên

document.addEventListener("DOMContentLoaded", function() {
  var ul = document.getElementById('random-list');
  for (var i = ul.children.length; i >= 0; i--) {
      ul.appendChild(ul.children[Math.random() * i | 0]);
  }
});

Sau khi áp dụng ta sẽ được danh sách sau, các bạn F5 để thấy được sự thay đổi

• Dòng thứ 1
• Dòng thứ 2
• Dòng thứ 3
• Dòng thứ 4
• Dòng thứ 5
• Dòng thứ 6
• Dòng thứ 7

Áp dụng thực tế

Cái này còn tùy thuộc vào tư duy của mỗi người, nhưng mình vẫn gợi ý một số ví dụ sau

• Dành cho danh sách liên kết blog
• Danh sách các câu hỏi trắc nhiệm
• Xáo trộn danh sách hình ảnh trong một bài viết
• Random các ý tưởng này cũng là một ví dụ 😁

Vậy thôi, chúc anh em một ngày vui! 😆