网站变灰-指定日期变成灰色

 

 

文件名： js\timedWebsiteGraysOut.js

// 设置每天凌晨触发一次的时间（24小时制）
const targetHour =9; // 12:00 AM

// 设置定时器，每隔一分钟检查一次
const dailyCheckInterval = setInterval(dailyCheck, 60 * 1000);

function dailyCheck() {
    // 获取当前系统日期
    const currentDate = new Date();

    // 获取目标日期（月、日）
    const targetMonth = 12; // 12月
    const targetDay = 9;  // 25日

    if(currentDate.getMonth() +1=== targetMonth){
        if(currentDate.getDate()< targetDay){
            if(currentDate.getDate()+1==targetDay && currentDate.getHours()>=targetHour){
                console.log("----前一天-"+ currentDate.getMonth()+"月" +currentDate.getDate()+"日");
                // 如果一致，动态引入脚本
                //loadScript('path/to/your/script.js');
                loadScript('js/turnGray.js');
                loadDynamicCSS('css/turnGrayCss.css');
                // 清除定时器，避免重复触发
                clearInterval(dailyCheckInterval);
            }else {

                console.log("---未选中-移除脚本1----"+ currentDate.getMonth()+"月" +currentDate.getDate()+"日");
                // 当按钮未选中时，移除脚本
                removeScript('js/turnGray.js');
                removeCssByPath('css/turnGrayCss.css');

                //console.log("11111");
            }

        }if(currentDate.getDate()===targetDay) {
            console.log("----全天-"+ currentDate.getMonth()+"月" +currentDate.getDate()+"日");
            // 如果一致，动态引入脚本
            //loadScript('path/to/your/script.js');
            loadScript('js/turnGray.js');
            loadDynamicCSS('css/turnGrayCss.css');
            // 清除定时器，避免重复触发
            clearInterval(dailyCheckInterval);
        }if(currentDate.getDate()> targetDay) {
            console.log("---未选中-移除脚本2----"+ currentDate.getMonth()+"月" +currentDate.getDate()+"日");
            // 当按钮未选中时，移除脚本
            removeScript('js/turnGray.js');
            removeCssByPath('css/turnGrayCss.css');
            //console.log("2222")
        }


    }else {

        console.log("---未选中-移除脚本----"+ currentDate.getMonth()+"月" +currentDate.getDate()+"日");
        // 当按钮未选中时，移除脚本
        removeScript('js/turnGray.js');
        removeCssByPath('css/css.css');
    }





}

function loadDynamicCSS(cssUrl) {
    // 创建一个 link 元素
    const linkElement = document.createElement('link');

    // 设置 link 元素的属性
    linkElement.rel = 'stylesheet';
    linkElement.type = 'text/css';
    linkElement.href = cssUrl; // 替换为你的 CSS 文件路径

    // 将 link 元素添加到文档的头部
    document.head.appendChild(linkElement);
}

function removeCssByPath(cssPath) {

    // 获取所有的 link 元素
    const cssLinks = document.querySelectorAll('link[rel="stylesheet"]');

    // 遍历每个 link 元素
    cssLinks.forEach(link => {
        // 检查 link 元素的 href 是否与指定的路径匹配
        if (link.href === cssPath) {
            // 移除匹配的 link 元素
            link.parentNode.removeChild(link);
        }
    });
}


function loadScript(scriptUrl) {
    // 创建一个 script 元素

    const scriptElement = document.createElement('script');
    // 设置脚本的 src 属性
    scriptElement.src = scriptUrl;
    // 将脚本元素添加到文档的头部
    document.head.appendChild(scriptElement);
}

function removeScript(scriptUrl) {
    // 获取所有已加载的脚本元素
    const scripts = document.querySelectorAll('script');
    // 遍历所有脚本元素
    scripts.forEach(script => {
        // 如果脚本的 src 属性等于指定的脚本路径，移除该脚本元素
        if (script.src === scriptUrl) {
            script.parentNode.removeChild(script);
        }
    });
}



 $(document).ready(function() {
     //添加效果
      dailyCheck();
      console.log("-----------ready");
 });

文件名：js\turnGray.js

/*
* -- grayscale.js --
* Copyright (C) James Padolsey (http://james.padolsey.com)
*
*/
var grayscale = (function () {
    var config = {
            colorProps: ['color', 'backgroundColor', 'borderBottomColor', 'borderTopColor', 'borderLeftColor',
                'borderRightColor', 'backgroundImage'],
            externalImageHandler: {
                /* Grayscaling externally hosted images does not work
                        - Use these functions to handle those images as you so desire */
                /* Out of convenience these functions are also used for browsers
                        like Chrome that do not support CanvasContext.getImageData */
                init: function (el, src) {
                    if (el.nodeName.toLowerCase() === 'img') {
                        // Is IMG element...
                    } else {
                        // Is background-image element:
                        // Default - remove background images
                        data(el).backgroundImageSRC = src;
                        el.style.backgroundImage = '';
                    }
                },
                reset: function (el) {
                    if (el.nodeName.toLowerCase() === 'img') {
                        // Is IMG element...
                    } else {
                        // Is background-image element:
                        el.style.backgroundImage = 'url(' + (data(el).backgroundImageSRC || '') + ')';
                    }
                }
            }
        },
        log = function () {
            try {
                window.console.log.apply(console, arguments);
            } catch (e) { };
        },
        isExternal = function (url) {
            // Checks whether URL is external: 'CanvasContext.getImageData'
            // only works if the image is on the current domain.
            return (new RegExp('https?://(?!' + window.location.hostname + ')')).test(url);
        },
        data = (function () {
            var cache = [0],
                expando = 'data' + (+new Date());
            return function (elem) {
                var cacheIndex = elem[expando],
                    nextCacheIndex = cache.length;
                if (!cacheIndex) {
                    cacheIndex = elem[expando] = nextCacheIndex;
                    cache[cacheIndex] = {};
                }
                return cache[cacheIndex];
            };
        })(),
        desatIMG = function (img, prepare, realEl) {
            // realEl is only set when img is temp (for BG images)
            var canvas = document.createElement('canvas'),
                context = canvas.getContext('2d'),
                height = img.naturalHeight || img.offsetHeight || img.height,
                width = img.naturalWidth || img.offsetWidth || img.width,
                imgData;
            canvas.height = height;
            canvas.width = width;
            context.drawImage(img, 0, 0);
            try {
                imgData = context.getImageData(0, 0, width, height);
            } catch (e) { }
            if (prepare) {
                desatIMG.preparing = true;
                // Slowly recurse through pixels for prep,
                // :: only occurs on grayscale.prepare()
                var y = 0;
                (function () {
                    if (!desatIMG.preparing) {
                        return;
                    }
                    if (y === height) {
                        // Finished!
                        context.putImageData(imgData, 0, 0, 0, 0, width, height);
                        realEl ? (data(realEl).BGdataURL = canvas.toDataURL()) :
                            (data(img).dataURL = canvas.toDataURL())
                    }
                    for (var x = 0; x < width; x++) {
                        var i = (y * width + x) * 4;
                        // Apply Monoschrome level across all channels:
                        imgData.data[i] = imgData.data[i + 1] = imgData.data[i + 2] =
                            RGBtoGRAYSCALE(imgData.data[i], imgData.data[i + 1], imgData.data[i + 2]);
                    }
                    y++;
                    setTimeout(arguments.callee, 0);
                })();
                return;
            } else {
                // If desatIMG was called without 'prepare' flag
                // then cancel recursion and proceed with force! (below)
                desatIMG.preparing = false;
            }
            for (var y = 0; y < height; y++) {
                for (var x = 0; x < width; x++) {
                    var i = (y * width + x) * 4;
                    // Apply Monoschrome level across all channels:
                    imgData.data[i] = imgData.data[i + 1] = imgData.data[i + 2] =
                        RGBtoGRAYSCALE(imgData.data[i], imgData.data[i + 1], imgData.data[i + 2]);
                }
            }
            context.putImageData(imgData, 0, 0, 0, 0, width, height);
            return canvas;
        },
        getStyle = function (el, prop) {
            var style = document.defaultView && document.defaultView.getComputedStyle ?
                document.defaultView.getComputedStyle(el, null)[prop] :
                el.currentStyle[prop];
            // If format is #FFFFFF: (convert to RGB)
            if (style && /^#[A-F0-9]/i.test(style)) {
                var hex = style.match(/[A-F0-9]{2}/ig);
                style = 'rgb(' + parseInt(hex[0], 16) + ',' +
                    parseInt(hex[1], 16) + ',' +
                    parseInt(hex[2], 16) + ')';
            }
            return style;
        },
        RGBtoGRAYSCALE = function (r, g, b) {
            // Returns single monochrome figure:
            return parseInt((0.2125 * r) + (0.7154 * g) + (0.0721 * b), 10);
        },
        getAllNodes = function (context) {
            var all = Array.prototype.slice.call(context.getElementsByTagName('*'));
            all.unshift(context);
            return all;
        };
    var init = function (context) {

        // Handle if a DOM collection is passed instead of a single el:
        if (context && context[0] && context.length && context[0].nodeName) {
            // Is a DOM collection:
            var allContexts = Array.prototype.slice.call(context),
                cIndex = -1,
                cLen = allContexts.length;
            while (++cIndex < cLen) {
                init.call(this, allContexts[cIndex]);
            }
            return;
        }
        context = context || document.documentElement;
        if (!document.createElement('canvas').getContext) {
            context.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)';
            context.style.zoom = 1;
            return;
        }
        var all = getAllNodes(context),
            i = -1,
            len = all.length;

        while (++i < len) {
            var cur = all[i];
            if (cur.nodeName.toLowerCase() === 'img') {
                var src = cur.getAttribute('src');
                if (!src) {
                    continue;
                }
                if (isExternal(src)) {
                    config.externalImageHandler.init(cur, src);
                } else {
                    data(cur).realSRC = src;
                    try {
                        // Within try statement just encase there's no support....
                        cur.src = data(cur).dataURL || desatIMG(cur).toDataURL();
                    } catch (e) {
                        config.externalImageHandler.init(cur, src);
                    }
                }
            } else {
                for (var pIndex = 0, pLen = config.colorProps.length; pIndex < pLen; pIndex++) {
                    var prop = config.colorProps[pIndex],
                        style = getStyle(cur, prop);
                    if (!style) {
                        continue;
                    }
                    if (cur.style[prop]) {
                        data(cur)[prop] = style;
                    }
                    // RGB color:
                    if (style.substring(0, 4) === 'rgb(') {
                        var monoRGB = RGBtoGRAYSCALE.apply(null, style.match(/\d+/g));
                        cur.style[prop] = style = 'rgb(' + monoRGB + ',' + monoRGB + ',' + monoRGB + ')';
                        continue;
                    }
                    // Background Image:
                    if (style.indexOf('url(') > -1) {
                        var urlPatt = /\(['"]?(.+?)['"]?\)/,
                            url = style.match(urlPatt)[1];
                        if (isExternal(url)) {
                            config.externalImageHandler.init(cur, url);
                            data(cur).externalBG = true;
                            continue;
                        }
                        // data(cur).BGdataURL refers to caches URL (from preparation)
                        try {
                            var imgSRC = data(cur).BGdataURL || (function () {
                                var temp = document.createElement('img');
                                temp.src = url;
                                return desatIMG(temp).toDataURL();
                            })();

                            cur.style[prop] = style.replace(urlPatt, function (_, url) {
                                return '(' + imgSRC + ')';
                            });
                        } catch (e) {
                            config.externalImageHandler.init(cur, url);
                        }
                    }
                }
            }
        }
    };
    init.reset = function (context) {
        // Handle if a DOM collection is passed instead of a single el:
        if (context && context[0] && context.length && context[0].nodeName) {
            // Is a DOM collection:
            var allContexts = Array.prototype.slice.call(context),
                cIndex = -1,
                cLen = allContexts.length;
            while (++cIndex < cLen) {
                init.reset.call(this, allContexts[cIndex]);
            }
            return;
        }
        context = context || document.documentElement;
        if (!document.createElement('canvas').getContext) {
            context.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(grayscale=0)';
            return;
        }
        var all = getAllNodes(context),
            i = -1,
            len = all.length;
        while (++i < len) {
            var cur = all[i];
            if (cur.nodeName.toLowerCase() === 'img') {
                var src = cur.getAttribute('src');
                if (isExternal(src)) {
                    config.externalImageHandler.reset(cur, src);
                }
                cur.src = data(cur).realSRC || src;
            } else {
                for (var pIndex = 0, pLen = config.colorProps.length; pIndex < pLen; pIndex++) {
                    if (data(cur).externalBG) {
                        config.externalImageHandler.reset(cur);
                    }
                    var prop = config.colorProps[pIndex];
                    cur.style[prop] = data(cur)[prop] || '';
                }
            }
        }
    };
    init.prepare = function (context) {
        // Handle if a DOM collection is passed instead of a single el:
        if (context && context[0] && context.length && context[0].nodeName) {
            // Is a DOM collection:
            var allContexts = Array.prototype.slice.call(context),
                cIndex = -1,
                cLen = allContexts.length;
            while (++cIndex < cLen) {
                init.prepare.call(null, allContexts[cIndex]);
            }
            return;
        }
        // Slowly recurses through all elements
        // so as not to lock up on the user.
        context = context || document.documentElement;
        if (!document.createElement('canvas').getContext) {
            return;
        }
        var all = getAllNodes(context),
            i = -1,
            len = all.length;
        while (++i < len) {
            var cur = all[i];
            if (data(cur).skip) {
                return;
            }
            if (cur.nodeName.toLowerCase() === 'img') {
                if (cur.getAttribute('src') && !isExternal(cur.src)) {
                    desatIMG(cur, true);
                }

            } else {
                var style = getStyle(cur, 'backgroundImage');
                if (style.indexOf('url(') > -1) {
                    var urlPatt = /\(['"]?(.+?)['"]?\)/,
                        url = style.match(urlPatt)[1];
                    if (!isExternal(url)) {
                        var temp = document.createElement('img');
                        temp.src = url;
                        desatIMG(temp, true, cur);
                    }
                }
            }
        }
    };
    return init;
})();
grayscale(document.body);
$(function () {
    console.log("grayscale");
    grayscale(document.body);
})

　　

文件名  css\turnGrayCss.css

/*网站置灰start  */

*{ margin:0; padding:0; font-family:微软雅黑;-webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
}


html{ filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    -webkit-filter: grayscale(1);
    zoom: 1; }

*{
    filter: gray(enabled=1) !important;
}

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,
em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,
caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,
summary,time,mark,audio,video{
    filter: gray(enabled=1) !important;}

/*网站置灰end  */


ul,li{ list-style:none}
a{ text-decoration:none; color:#FFF; }
a:hover{ text-decoration:none; }

.ab{ text-decoration:none; font-size:12px; color:#7B4E00 }
.ab:hover{ text-decoration:none;  font-size:12px; color:#7B4E00 }

.b{ color:#FFF; font-size:12px; text-decoration:none}
.b:hover{ color:#FFF; font-size:12px; text-decoration:none}
.m{ color:#733800; font-size:12px; text-decoration:none}
.m:hover{ color:#733800; font-size:12px; text-decoration:none}
.zt{font-size:14px; color:#ba0404; font-weight:bold; font-family:微软雅黑;}
.zt:hover{font-size:14px; color:#ba0404; font-weight:bold; font-family:微软雅黑;}
.new{text-decoration:none; color:#000; font-size:14px}
.new:hover{text-decoration:none; color:#000; font-size:14px}
.new1{ color:#000; font-size:13px}
.new1:hover{text-decoration:none; color:#000; font-size:13px}

.bb{ color:#000; font-size:12px}
.bb:hover{text-decoration:none; color:#000; font-size:12px}
body{
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    background:url(../images/bj6.jpg)}

filter: grayscale(100%);/*火狐*/
-webkit-filter:grayscale(100%);/*chrome*/
img{border:none;}
.daoHang{ font-size:16px;color:#fdf404; font-weight:bold;}
.daoHang:hover{ font-size:16px;color:#fdf404; font-weight:bold;}