Đoạn mã JavaScript tự động thay đổi ảnh nền background dựa vào ngày hiện tại

Trong thiết kế giao diện website, sử dụng ảnh nền là một trong những cách đơn giản và hiệu quả nhất để tạo hiệu ứng thẩm mỹ ấn tượng cho website. Chọn được ảnh nền phù hợp bạn sẽ biến một giao diện trông ổn thành cá tính.

Tuy nhiên con người cũng không thích sự đơn điệu, ảnh đẹp nhìn mãi cũng chán, nếu bạn muốn ảnh nền của website tự động đổi sang một ảnh khác dựa vào ngày hiện tại thì bài viết này sẽ giúp bạn.

Ưu điểm của cách trên là người dùng sẽ không phải thao tác gì cả, họ không phải ấn bất cứ nút nào để đổi ảnh nền, mọi sự diễn tiến theo thời gian, ngày này họ vào thì sẽ có ảnh nền này, ngày khác họ vào thì sẽ hiện ảnh nền khác.

Mã mẫu sử dụng JavaScript nên sẽ không làm hao tốn gì tài nguyên máy chủ của bạn.

Chúng ta sẽ phân tích từng phần một, dưới đây là mã lấy ngày trong tháng, giá trị từ 1 – 31.

const d = new Date(); // lấy ngày tháng năm
let car = d.getDate(); // lấy ngày 1 - 31
let cDate = parseInt(car); // chuyển ngày về dạng số

Hàm new Date() sẽ lấy ra kết quả ngày tháng năm, giờ giấc theo thời gian thực, ví dụ lúc viết bài này, kết quả trên sẽ là:

Fri Sep 03 2021 21:26:18 GMT+0700 (Indochina Time)

Hàm getDate() sẽ trích ra ngày ở thời điểm hiện tại:

3

Cuối cùng để chắc mẩm về định dạng dữ liệu, tôi chuyển nó về dạng số cho an toàn, bằng câu lệnh parseInt(car), trong đó biến car là giá trị ngày mà ta đã trích ra được.

Ảnh nền website cũng thường gắn với điều kiện về kích cỡ màn hình. Với kích cỡ màn hình nào thì mới hiển thị ảnh nền nào đấy. Ta dùng hàm JS có tên screen.width để biết kích cỡ chiều rộng của thiết bị.

let scrW = parseInt(screen.width);

Với hàm trên, biến scrW sẽ cho ta giá trị quy ra số của màn hình. Ví dụ màn hình có kích cỡ 1920px thì scrW sẽ có giá trị là 1920.

Bây giờ giả sử chúng ta có 3 ảnh nền khác nhau muốn thay đổi (bg1, bg2, bg3). Ảnh đầu tiên sẽ là ảnh mặc định mà ta sẽ dùng, ngày tiếp theo ta dùng ảnh nền bg2, ngày tiếp theo nữa là bg3, sau đó lại quay lại bg1.

Mẹo ở đây là ta sẽ dùng hàm để xác định nó có chia hết cho 3 hay không, nếu ngày đó chia hết cho 3 (ví dụ ngày 3, 6, 9,…) thì để là ảnh mặc định, nếu chia 3 dư 1 (ngày 1, 4, 7,…) thì hiện ảnh bg2, nếu chia 3 dư 2 (ngày 2, 5, 8) thì hiện ảnh bg3.

Toán tử dùng để xác thực việc lấy phần dư trong JS là %, nó sẽ ra kết quả là số dư, trong trường cụ thể mã của chúng ta sẽ là kiểu này:

if (cDate % 3 === 0) {// hiển thị ảnh bg1}
if (cDate %3 === 1) {// hiển thị ảnh bg2}
if (cDate % 3 === 2) {// hiển thị ảnh bg3}

Thực tế chúng ta sẽ không cần dùng một trong 3 câu lệnh trên, ví dụ cái đầu, nếu ảnh bg1 là giá trị mặc định khi ta viết CSS cho ảnh nền của body.

Với if ta sẽ kết hợp thêm điều kiện về kích cỡ màn hình, ví dụ ảnh nền mà chúng ta chọn sẽ chỉ hiển thị với kích cỡ màn hình tối thiểu là 1150px, và tối đa phải nhỏ hơn 1925px.

Lúc này câu lệnh sẽ như thế này:

if ((cDate % 3 === 1) && (scrW >= 1150 ) && (scrW < 1925)) {// hiển thị ảnh nền bg2}

Để thay đổi ảnh nền chúng ta dùng câu lệnh JS như sau:

document.body.style.backgroundImage = "url('image/bg2.jpg')";

Kết hợp thành câu lệnh hoàn chỉnh sẽ như thế này:

if ((cDate % 3 === 1) && (scrW >= 1150 ) && (scrW < 1925)){ 
       document.body.style.backgroundImage = "url('image/bg2.jpg')";
}

Kết hợp tất cả lại câu lệnh sẽ như sau

<style>
@media (min-width:1150px) { /* CSS mặc định */
       body {
background-image:url("image/bg1.jpg"); 
             background-repeat:no-repeat;
       }                        
}
</style>

<script>
// đoạn mã đổi ảnh nền dựa trên ngày
       const d = new Date(); // lấy ngày tháng năm
       let car = d.getDate(); // lấy ngày 1 - 31
       let cDate = parseInt(car); // chuyển ngày về dạng số
       let scrW = parseInt(screen.width); // lấy kích cỡ màn hình thiết bị để ra điều kiện hiển thị ảnh
                
       if ((cDate % 3 === 1) && (scrW >= 1150 ) && (scrW < 1925)){ // lẻ 1 khi chia cho 3 thì hiện ảnh bg này
       
       document.body.style.backgroundImage = "url('image/bg2.jpg')";
       }
               
       if ((cDate % 3 === 2) && (scrW >= 1150 ) && (scrW < 1925)){ // lẻ 2 khi chia cho 3 thì hiện ảnh bg này

       document.body.style.backgroundImage = "url('image/bg3')";

       }    
</script>

PS: với hàm điều kiện ở trên, ngoài ảnh nền chúng ta có thể bổ sung các lệnh khác nếu thấy cần thiết, ví dụ thay đổi màu chữ của thẻ nào đấy (việc thay đổi ảnh nền thường kéo theo một số chữ cần sửa lại màu sắc). Ví dụ:

let hColor; // tạo mảng 

hColor = document.querySelectorAll(".gTitle"); // lấy tất cả phần tử đưa vào mảng
                     
for (let i = 0; i < h2Color.length; i++) {
         hColor[i].style.color = "#565656"; // đổi sang màu dễ nhìn hơn
}

Cái này cần đặt trong dấu ngoặc {} của hàm điều kiện if nào đấy.

Leave a Comment