Thay đổi background bằng javascript
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.
Hàm 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à:
Hàm 1 sẽ trích ra ngày ở thời điểm hiện tại:
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 2, trong đó biến 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. 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 4 để biết kích cỡ chiều rộng của thiết bị.
Với hàm trên, biến 5 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 ( 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 7, ngày tiếp theo nữa là 8, sau đó lại quay lại 9.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à 0, 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:
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 1 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:
Để thay đổi ảnh nền chúng ta dùng câu lệnh JS như sau:
Kết hợp thành câu lệnh hoàn chỉnh sẽ như thế này:
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 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ụ: |