用js实现在特定日期全站变灰

明日清明,举国哀悼,不忘记每个因疫情逝去的人,在一些特殊的日子里,我们可能会用到这段代码。

逝者已矣,生者如斯

方法一

判断当前日期+ css的filter滤镜,由于要照顾各浏览器的兼容性,css最好要写全。

<script>    
$(document).ready(function() {    
var today = new Date();    
var todayMonth = today.getMonth() + 1;    
var todayDate = today.getDate();    
function gray(){    
$('body').css({    
"-webkit-filter":"grayscale(100%)",    
"-moz-filter":"grayscale(100%)",    
"-ms-filter":"grayscale(100%)",    
"-o-filter":"grayscale(100%)",    
"filter":"progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)",    
"_filter":"none"});    
}    
if (todayMonth == 4 && todayDate == 4) {gray()} // 4 月 4 日    
if (todayMonth == 6 && todayDate == 4) {gray()}    
if (todayMonth == 12 && todayDate == 13) {gray()} // 12 月 13 日    
})    
</script>

方法二

用grayscale.js,一句引用+一句调用就ok了,

但是grayscale.js在Safari4以下和Chrome中不支持对图片进行灰度处理!

<script src="https://j11y.io/demos/grayscale/grayscale.js"></script>    
// 原生js    
grayscale(document.getElementById("gray"));    
// jq    
grayscale($("body"));

定时后:

<script src="https://j11y.io/demos/grayscale/grayscale.js"></script>    
<script>    
$(document).ready(function() {    
var today = new Date();    
var todayMonth = today.getMonth() + 1;    
var todayDate = today.getDate();    
if (todayMonth == 4 && todayDate == 4) {grayscale($("body"));} // 对 body 执行    
if (todayMonth == 6 && todayDate == 4) {grayscale($("#gray"));} // 可指定 id class 或单一元素 em div ..    
if (todayMonth == 12 && todayDate == 13) {grayscale()} // 简写,全局    
})    
</script>

版权声明:
作者:laocao_blog
链接:http://www.lcblog.vip/54.html
来源:老曹博客
文章版权归作者所有,未经允许请勿转载。

THE END
分享
二维码
打赏
< <上一篇
下一篇>>