Tự động chuyển trang web thành màu xám vào Ngày Quốc khánh Công tế

HowieHz
2024-03-21
Khám phá công nghệ > Kỹ thuật Front-end > Kỹ thuật kiểu dáng

🌍 Tiếng Việt

122

Việc làm mới CDN có thể mất thời gian, vì vậy tôi muốn tạo một giải pháp tự động thay đổi giao diện trong ngày đặc biệt. Sau khi tìm kiếm trên mạng nhưng không thấy đáp án phù hợp, tôi đã quyết định tự viết đoạn mã này.

Cách sử dụng

Bạn chỉ cần chèn đoạn mã bên dưới vào phần head của tệp HTML là trang web sẽ tự động chuyển sang màu xám vào Ngày Quốc khánh Công tế (ngày 13 tháng 12).

Giải thích đoạn mã

Phần JavaScript sẽ kiểm tra ngày hiện tại và nếu đúng ngày 13 tháng 12, nó sẽ thêm thuộc tính theme-mode với giá trị 'gray' cho thẻ html. Phần CSS sẽ áp dụng hiệu ứng lọc màu xám cho toàn bộ trang web khi thuộc tính theme-mode có giá trị 'gray'.

Mã nguồn

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<script type="text/javascript">  
  var date = new Date();  
  var month = date.getMonth() + 1;  
  var day = date.getDate();  
  if (month === 12 && day === 13) {  
    document.documentElement.setAttribute("theme-mode", "gray");  
  }  
</script>  
<style type="text/css">  
  html[theme-mode="gray"] {  
    /*webkit*/  
    -webkit-filter: grayscale(100%);  
    /*firefox*/  
    -moz-filter: grayscale(100%);  
    /*ie9*/  
    -ms-filter: grayscale(100%);  
    /*opera*/  
    -o-filter: grayscale(100%);  
    /*ie*/  
    filter: grayscale(100%);  
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);  
  }  
</style>  

Lưu ý: Bạn có thể sao chép đoạn mã trên và dán vào file HTML của mình.

Lưu ý quan trọng

Nếu thẻ html của bạn đã có thuộc tính theme-mode, vui lòng thay thế từ khóa theme-mode xuất hiện hai lần trong đoạn mã bằng một tên khác để tránh xung đột.

0 )

Bài viết liên quan

2024-06-13 Chú ý! align-items: flex-start có thể khiến overflow-wrap: break-word bị vô hiệu hóa.
2024-05-09 Làm thế nào để tái sử dụng các kiểu CSS một cách chính xác bằng cách sử dụng @extend trong Stylus?

Bài trước: Giải pháp khắc phục vấn đề độ trễ API Umami (cách sửa mã nguồn dự án mã nguồn mở và xây dựng hình ảnh Docker - ví dụ về Umami).
Bài sau: Khắc phục lỗi CORS&CSP trong Plugin Umami của Halo CMS.

• Trang chủ
• Lưu trữ
• Ghi chú
• Liên kết bạn bè
• Về tôi
• Tìm kiếm

Thông tin website

Số ngày tồn tại của trang web: 1 năm 131 ngày 20 giờ 58 phút 55 giây.

Trang web được cung cấp dịch vụ tăng tốc bởi Đa Giác Vân & Lại Ảnh Vân & WAF.SB.

• Số lượt đọc: 33.191
• Tổng bài viết đã đăng: 90

Theme là higan-hz, vận hành bởi Halo Pro © 2025 Trang cá nhân của Hạo Tử

• Trang chủ
• Lưu trữ
• Ghi chú
• Liên kết bạn bè
• Về tôi

Chúc bạn may mắn và thành công!