目錄

【前端動手玩創意】等待的轉圈圈效果 (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。
可以新增、刪除，看有哪些元素被列入要刪除的黑名單。