Thay đổi background bằng javascript ✅ Đã Test
Mẹo Hướng dẫn Thay đổi background bằng javascript Chi Tiết
Bùi Mạnh Hùng đang tìm kiếm từ khóa Thay đổi background bằng javascript được Update vào lúc : 2022-12-21 23:10:15 . Với phương châm chia sẻ Bí quyết Hướng dẫn trong nội dung bài viết một cách Chi Tiết 2022. Nếu sau khi tham khảo Post vẫn ko hiểu thì hoàn toàn có thể lại Comments ở cuối bài để Tác giả lý giải và hướng dẫn lại nha.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 suất cao 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 đậm 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 nhờ vào ngày hiện tại thì nội dung bài viết này sẽ giúp bạn.
Ưu điểm của cách trên là người tiêu dùng sẽ không phải thao tác gì cả, họ không phải ấn bất kể 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 sever 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 một - 31 let cDate = parseInt(car); // chuyển ngày về dạng sốHàm
Fri Sep 03 2022 21:26:18 GMT+0700 (Indochina Time)0 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 2022 21:26:18 GMT+0700 (Indochina Time)Hàm
Fri Sep 03 2022 21:26:18 GMT+0700 (Indochina Time)1 sẽ trích ra ngày ở thời điểm hiện tại:3Cuối cùng để chắc mẩm về định dạng tài liệu, tôi chuyển nó về dạng số cho bảo vệ an toàn và đáng tin cậy, bằng câu lệnh
Fri Sep 03 2022 21:26:18 GMT+0700 (Indochina Time)2, trong đó biến Fri Sep 03 2022 21:26:18 GMT+0700 (Indochina Time)3 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 hiển thị. Với kích cỡ màn hình hiển thị nào thì mới hiển thị ảnh nền nào đấy. Ta dùng hàm JS mang tên
Fri Sep 03 2022 21:26:18 GMT+0700 (Indochina Time)4 để 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
Fri Sep 03 2022 21:26:18 GMT+0700 (Indochina Time)5 sẽ cho ta giá trị quy ra số của màn hình hiển thị. Ví dụ màn hình hiển thị có kích cỡ 1920px thì scrW sẽ có mức giá trị là 1920.Bây giờ giả sử tất cả chúng ta có 3 ảnh nền rất khác nhau muốn thay đổi (
Fri Sep 03 2022 21:26:18 GMT+0700 (Indochina Time)6). Ả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 Fri Sep 03 2022 21:26:18 GMT+0700 (Indochina Time)7, ngày tiếp theo nữa là Fri Sep 03 2022 21:26:18 GMT+0700 (Indochina Time)8, sau đó lại quay lại Fri Sep 03 2022 21:26:18 GMT+0700 (Indochina Time)9.Mẹo ở đây là ta sẽ dùng hàm để xác định nó có chia hết cho 3 hay là 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 một, 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à
30, nó sẽ ra kết quả là số dư, trong trường rõ ràng mã của tất cả 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 bg3Thực tế tất cả 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 toàn thân.
Với
31 ta sẽ phối hợp thêm điều kiện về kích cỡ màn hình hiển thị, ví dụ ảnh nền mà tất cả chúng ta chọn sẽ chỉ hiển thị với kích cỡ màn hình hiển thị 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ư vậy này:
if ((cDate % 3 === 1) && (scrW >= 1150 ) && (scrW < 1925)) // hiển thị ảnh nền bg2Để thay đổi ảnh nền tất cả chúng ta dùng câu lệnh JS như sau:
document.body toàn thân.style.backgroundImage = "url('image/bg2.jpg')";Kết hợp thành câu lệnh hoàn hảo nhất sẽ như vậy này:
if ((cDate % 3 === 1) && (scrW >= 1150 ) && (scrW < 1925)) document.body toàn thân.style.backgroundImage = "url('image/bg2.jpg')";Kết hợp tất cả lại câu lệnh sẽ như sau
PS: với hàm điều kiện ở trên, ngoài ảnh nền tất cả chúng ta hoàn toàn có thể tương hỗ update những lệnh khác nếu thấy thiết yếu, 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ố trong những chữ cần sửa lại sắc tố). Ví dụ:
Tải thêm tài liệu liên quan đến nội dung bài viết Thay đổi background bằng javascript programming javascript