用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
来源:PB网站模板_源码_教程
文章版权归作者所有,未经允许请勿转载。
THE END
二维码
打赏


共有 0 条评论