【前端动手玩创意】遮蔽广告(D卡未登入)脚本、自定义新增名单(6)

目录

【前端动手玩创意】等待的转圈圈效果 (1)

【前端动手玩创意】google五星评分的星星(2)

【前端动手玩创意】CSS-3D卡片翻转效果(3) (今天难度颇高，想挑战再进来！)

【前端动手玩创意】一句CSS做出好看的hero section！(4)

【前端动手玩创意】创造一个Skill bar(5)

【前端动手玩创意】遮蔽广告(D卡未登入)脚本、自定义新增名单(6)

【前端动手玩创意】前端canvas截图的招式！竟然有三招，可存成SVG或PNG (7)

【前端动手玩创意】让你的PDF档案更难被抓取(8)

【前端动手玩创意】哇操！你敢信？花式写todo-list，body里面一行都没有也能搞？(9)

【前端动手玩创意】卡片製作，才不是！是卡片製作器！(10)

前情提要

逛论坛或网站常常有恼人的盖板广告，要马就是要你登入、注册，
要马就是搞一堆课程的贩售广告，
对重视使用者体验的人来说，真的是一场噩梦！
为了解决这个问题，我模拟了AdBlock的其中一个功能，删除页面上的元素！

乾乾净净才是王道阿。

效果

按下ctrl+Q启动删除元素模式：

被选取的会加上边框色彩，让人确认是否要删除：

点选确认后：

烦人的元素就此消失在这个永恆的宇宙里。

观念笔记

套件一：toastr

    //toast.js cdn汇入    const toastJS = ` <link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.4/toastr.min.css" rel="stylesheet"  />    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.4/toastr.min.js"></script>`    $('body').append(toastJS);

测试效果反应网站

[十分钟学习] toastr - 简易提示讯息

套件二：SweetAlert2

    //设定cdn使用Sweetalert套件    let Sweetalert2=`<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>`    $('html').append(Sweetalert2)    

有提供很多API範例，还可以自己定义可爱的小动物XD

官方网站

监听键盘组合键

 document.addEventListener('keydown', function(e){        if(e.which==81 && e.ctrlKey==true){        //.....        }

Object.assign 动态修改样式

用JS动态修改CSS的三种写法，花式JS玩弄样式，吓死你的同事！

油猴程式码

// ==UserScript==// @name         删除广告元素// @namespace    http://tampermonkey.net/// @version      0.1// @description  try to take over the world!// @author       You// @match         *://*/*// @require      https://code.jquery.com/jquery-3.6.3.min.js// @icon         https://www.hexschool.com/// @grant        none// ==/UserScript==(function() {    //---------------------------------------    // 宣告变数    let set    let Check = true;    let List=[]    //设定选取的border色彩效果    let styleNeon = `@keyframes neon-color {        from {        filter: hue-rotate(0deg);        }        to {        filter: hue-rotate(360deg);        }    }`    $('style:last').append(styleNeon)    //设定cdn使用Sweetalert套件    let Sweetalert2=`<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>`    $('html').append(Sweetalert2)    //使用者点选某个元素 执行删除元素function    function SetDeleteEl(e){        e.preventDefault();        set=e.target.class        console.log(set)        const border={        border:"4px dotted red"        }        const Neon={        animation: "neon-color 2.5s linear infinite"        }        const NoBorder={            border:"none"            }        const StopNeon={            animation: ""            }        Object.assign(e.target.style,border)        Object.assign(e.target.style,Neon)        //e.target.remove()        if (Check==true){        Swal.fire({          title: '确定要删除这个元素?',          showDenyButton: true,          showCancelButton: false,          confirmButtonText: '确认',          denyButtonText: `取消`,        }).then((result) => {          /* Read more about isConfirmed, isDenied below */          if (result.isConfirmed) {            e.target.remove()            List.push(e.target.className)            localStorage.setItem('List',List);            Check=false;            Swal.fire('成功删除此元素!', '', 'success')          } else if (result.isDenied) {            Check=false;            Swal.fire('动作已取消', '', 'info')            Object.assign(e.target.style,NoBorder)            Object.assign(e.target.style,StopNeon)          };      });    }            //选取流程结束后  解开选取流程的事件绑定            $('body').unbind('click',SetDeleteEl)    }    //toast.js cdn汇入    const toastJS = ` <link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.4/toastr.min.css" rel="stylesheet"  />    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.4/toastr.min.js"></script>`    $('body').append(toastJS);    // 当使用者按下Ctrl+Q 就执行主程序    document.addEventListener('keydown', function(e){        if(e.which==81 && e.ctrlKey==true){            RemoveListItem();            toastr.options = {                // 参数设定[注1]                "closeButton": false, // 显示关闭按钮                "debug": false, // 除错                "newestOnTop": false,  // 最新一笔显示在最上面                "progressBar": false, // 显示隐藏时间进度条                "positionClass": "toast-bottom-right",                "preventDuplicates": false, // 隐藏重覆讯息                "onclick": null, // 当点选提示讯息时，则执行此函式                "showDuration": "300", // 显示时间(单位: 毫秒)                "hideDuration": "1000", // 隐藏时间(单位: 毫秒)                "timeOut": "2000", // 当超过此设定时间时，则隐藏提示讯息(单位: 毫秒)                "extendedTimeOut": "1000", // 当使用者触碰到提示讯息时，离开后超过此设定时间则隐藏提示讯息(单位: 毫秒)                "showEasing": "swing", // 显示动画时间曲线                "hideEasing": "linear", // 隐藏动画时间曲线                "showMethod": "fadeIn", // 显示动画效果                "hideMethod": "fadeOut" // 隐藏动画效果            }            toastr.success( "已开启删除元素模式！" );            $('body').on('click',SetDeleteEl)            Check=true        }})    function RemoveListItem(){        if (localStorage.getItem('List')!=null){            item=localStorage.getItem('List').split(',')            for (i=0;i<item.length;i++){                item[i]='.'+item[i]                item[i]=item[i].replaceAll(' ','.')                try{                document.querySelector(item[i]).remove()}                catch{}            }            // item='.'+item            // item=item.replaceAll(' ','.')            // document.querySelector(item).remove()        }    }//--------------------------------------------------------})();

心得

短短150行左右的程式码，就写得好辛苦！（汗
过去写过很多次类似的东西，所以基本上没有卡关的地方，
只是设计逻辑、尝试的过程还是比想像的还要耗精神( ´•̥̥̥ω•̥̥̥ )

但写出来比过去快很多，也比过去好看超级多的。
给自己一个讚讚！

重新把localstorge複习一遍，Object.assign、套件使用等。
算是一个确确实实的实力巩固过程。

延伸

未来可以新增控制黑名单元素的UI。
可以新增、删除，看有哪些元素被列入要删除的黑名单。