第7次修改了可删除可持久保存的前端html备忘录

    
    
    
    
        * {
            margin: 0;
        }

        textarea,
        div {
            background-color: rgba(103, 240, 49, 0.621);
        }

        div input+button {
            background-color: #fff5664f;
        }

        a {
            color: #f5de0b;
            text-decoration: none;
        }

        div input+button+button {
            background-color: #47eb0b;
        }

        /* div>button {
            display: none;
        } */
        form,
        h1 {
            /* 块级元素转行内元素 ；行内转块：display:block; 块、行内元素转换行内块：display:inline-block;*/
            display: inline;
        }

        button,
        h1,
        input {
            /* 禁止元素选中；    解除文本选中user-select: text;*/
            user-select: none;
        }

        /* 完成样式  */
        .finish {
            /* 文本-装饰：删除线 */
            text-decoration: line-through;
            /* 文本阴影：水平偏移量 垂直偏移量 模糊距离 阴影颜色 */
            /* 阴影效果：水平偏移量 垂直偏移量 模糊距离 阴影颜色 内阴影 */
            text-shadow: 2px 2px 2px rgb(240, 48, 10);
            box-shadow: 0 0 10px 5px rgba(90, 9, 9, 0.916);
            background-color: rgba(12, 1, 1, 0.447);
            color: #5e0606;
        }

        /* 下面的是颜色样式*/
        h1 {
            color: #fff;
            text-shadow:
                2px 2px 2px #ddd,
                4px 4px 2px #bbb,
                6px 6px 2px #999,
                8px 8px 2px #777,
                10px 10px 2px #555,
                12px 12px 2px #333,
                14px 14px 2px #111;
        }

        bdi {
            color: #df1212;
            border-radius: 10px;
            background-color: #efed6a;
        }

        u {
            color: #fff;
            text-shadow:
                1px 1px 2px #ddd,
                2px 2px 2px #bbb,
                3px 3px 2px #999,
                4px 4px 2px #777;
        }

        button,
        input {
            cursor: pointer;
            border: 0;
            line-height: 30px;
            padding: 0 10px;
            font-size: 1rem;
            border-radius: 10px;
            background-color: rgba(220, 0, 0, 1);
            background-image: linear-gradient(to top left,
                    rgba(0, 0, 0, 0.2),
                    rgba(0, 0, 0, 0.2) 30%,
                    rgba(0, 0, 0, 0));
            box-shadow:
                inset 2px 2px 3px rgba(255, 255, 255, 0.6),
                inset -2px -2px 3px rgba(0, 0, 0, 0.6);
            color: #fcf9f9;
            text-shadow: 1px 1px 1px #100000;
        }

        a,
        textarea {
            line-height: 2;
            font-size: 1rem;
            text-align: center;
            color: #fff;
            text-shadow: 1px 1px 1px #000;
        }

        div,
        u,
        h1,
        textarea {
            background-color: rgba(44, 220, 0, 0.5);
            background-image: linear-gradient(to top left,
                    rgba(0, 0, 0, 0.2),
                    rgba(0, 0, 0, 0.2) 30%,
                    rgba(0, 0, 0, 0));
            box-shadow: inset 2px 2px 3px rgba(255, 255, 255, 0.6),
                inset -2px -2px 3px rgba(0, 0, 0, 0.6);
            box-sizing: border-box;
            padding: 5px 1px;
            border: 2px solid rgba(173, 12, 157, 0.616);
            border-radius: 10px;
        }

        textarea:hover,
        input:hover,
        button:hover {
            background-color: rgba(78, 168, 13, 0.587);
        }

        div input+button+button:hover {
            background-color: rgb(251, 231, 11);
        }

        span:hover {
            box-shadow: 0 0 10px 5px rgba(255, 255, 255, 0.916);
        }

        button:active,
        input:active {
            box-shadow:
                inset -2px -2px 3px rgba(255, 255, 255, 0.6),
                inset 2px 2px 3px rgba(0, 0, 0, 0.6);
        }

        ::placeholder {
            color: rgb(255, 255, 255);
            box-shadow: 0 0 10px 5px rgba(255, 255, 255, 0.916);
            letter-spacing: 13px;
        }

        ::placeholder,
        span {
            color: rgb(255, 255, 255);
            border-radius: 10px;
            background-color: #0a541e;
            text-shadow:
                1px 1px 2px #ddd,
                2px 2px 2px #bbb,
                3px 3px 2px #999,
                4px 4px 5px #777;
        }

        /* =============第一种input的checkbox样式================= 
        input[type="checkbox"] {
            width: 21px;
            height: 21px;
            position: relative;
        }*/
        /* ---------------------------第2种input的checkbox样式----------------------------------------- */
        /* input的checkbox样式添加伪元素*/
        input[type="checkbox"]::after {
            content: "";
            width: 100%;
            height: 100%;
            border: 2px solid #f10505;
            position: absolute;
            left: -3px;
            top: -3px;
            border-radius: 50%;
        }

        input[type="checkbox"] {
            -webkit-appearance: none;
            appearance: none;
            width: 25px;
            height: 25px;
            position: relative;
            margin-right: 10px;
            background-color: #fff666;
        }

        /* ---------------------------------------------*/
        /* 设置checkbox点击之后的样式*/
        input[type="checkbox"]:checked::after {
            height: 15px;
            width: 25px;
            border-top: none;
            border-right: none;
            border-radius: 0;
            transform: rotate(-45deg);
            transition: all 0.5s ease-in-out;
        }

        /* 重新设置span的样式 */
        span {
            text-decoration-color: #bf1313;
            text-underline-offset: 1px;
            /* 添加过渡效果 */
            transition: all 0.5s;
        }

        /* span添加hover事件 */
        span:hover {
            text-decoration-color: var(--checked);
            text-underline-offset: 10px;
            color: var(--checked);
        }

        /* *****************备用信息盒子************************ */
        .model-box {
            /* 隐藏盒子*/
            display: none;
        }

        .model-box .content {
            position: absolute;
            top: 100px;
            /* calc方法可以自动计算数值 */
            left: calc(50% - 270px);
            width: 680px;
            height: 350px;
            border-radius: 5px;
            /* 盒子阴影 */
            box-shadow: 0 2px 12px rgba(43, 4, 4, 0.2);
            background-color: #cfe9d4;
        }

        h2 {
            padding: 0 10px;
        }

        .model-box .content .title {
            /* 弹性布局 */
            display: flex;
            /* 让子元素水平与两端对齐 */
            justify-content: space-between;
            height: 50px;
            line-height: 50px;
            /* 鼠标移入呈现移动光标 */
            cursor: move;
            border-radius: 5px;
            background-color: #a0eab0;
        }

        .model-box .content .title i {
            /* i标签默认是斜体 这个属性可以变正 */
            font-style: normal;
            font-size: 50px;
            color: #b1b4ba;
            cursor: pointer;
            margin-right: 10px;
            line-height: 42px;
        }

        /*备用信息 X 鼠标移入变色 */
        .model-box .content .title i:hover {
            color: #110647;
        }

        .mess button {
            background-color: #ea600b;
            /* 相对定位 */
            position: relative;
            top: 10px;
        }

        bdi,
        .mess {
            margin: 10px;
        }
    



    

        备忘录
        (memorandum)
    
    

    添加打开URL
    

    
    
        
            
                
备用信息
                &times
            
            
                
                    <a href="输入网站地址" target="_blank">
                    输入网站名称
                    </a>
                
                ^\s*(?=\r?$)\n
                
                

                百度一下
                菜鸟取色器
                csdn博客
                 w3schools 教程
                哔哩哔哩bilibili
                西瓜视频
                原神社区-米游社
                原神大地图
            
        
    
    
    

        var TextInputBox = document.querySelector(".text-input-box");
        var addto = document.querySelector(".addto");
        var text = document.querySelector(".text");
        addto.onclick = function () {
            inserhtml(TextInputBox.value, '');
            TextInputBox.value = '';
            TextInputBox.focus();
            savetodo();
        }
        var savetodo = function () {
            let todoarr = [];
            let todojs = {};
            var econtent = document.querySelectorAll('.content');
            for (let index = 0; index < econtent.length; index++) {
                todojs.name = econtent[index].innerHTML;
                todojs.finish = econtent[index].classList.contains('finish');
                todoarr.push(todojs);
                todojs = {};
            }
            save(todoarr);
        }
        var loadtodo = function () {
            let todoarr = load();
            for (let index = 0; index < todoarr.length; index++) {
                inserhtml(todoarr[index].name, todoarr[index].finish ? 'finish' : '');
            }
        }
        var save = function (arr) {
            // 持久储存
            localStorage.todos = JSON.stringify(arr);
        }
        var load = function (arr) {
            var arr = JSON.parse(localStorage.todos);
            return arr;
        }
        text.onclick = function () {
            var tg = event.target;
            var tgkids = tg.parentElement.children;

            if (tgkids[0].checked) {

                tgkids[1].style.display = "block";
                tgkids[3].style.display = "none";
                tgkids[4].classList.remove("finish");
            }
            else {
                tgkids[4].classList.remove("finish");
                tgkids[1].style.display = "none";
                tgkids[2].style.display = "none";
                tgkids[3].style.display = "none";
            }

            if (tg.innerHTML == "选择删除") {
                tgkids[4].classList.add("finish");
                tgkids[1].style.display = "none";
                tgkids[2].style.display = "block";
                tgkids[3].style.display = "block";
                tgkids[3].onclick = function () {
                    tg.parentElement.remove("");

                }
            }
            if (tg.innerHTML == "取消") {

                tgkids[0].checked = false;
                tgkids[1].style.display = "none";
                tgkids[2].style.display = "none";
            }
            savetodo();
        }

        var inserhtml = function (val, cls) {
            text.insertAdjacentHTML("beforeend",
                `
                    
                    选择删除   
                    取消  
                    确定删除                     
                    ${val}                            
                `
            )
        }
        loadtodo();
        /*********************一个html提示弹窗无需点击的函数 ******************************/
        function displayAlert(type, data, time) {

            var a = document.createElement("a");
            if (type == "info") {
                a.style.backgroundColor = "#990000";
            }
            a.id = "a";
            a.style.position = "absolute";
            a.style.width = "300px";
            a.style.height = "60px";
            a.style.marginLeft = "-100px";
            a.style.marginTop = "-30px";
            a.style.left = "30%";
            a.style.top = "15%";
            a.style.color = "white";
            a.style.fontSize = "25px";
            a.style.borderRadius = "20px";
            a.style.textAlign = "center";
            a.style.lineHeight = "60px";
            if (document.getElementById("a") == null) {
                document.body.appendChild(a);
                a.innerHTML = data;
                setTimeout(function () {
                    document.body.removeChild(a);
                }, time);
            }
        }
        /*********************打开文件JavaScript部分 ******************************/
        var openBtn = document.getElementById("openButton");
        openBtn.addEventListener('click', function () {
            var filePath = prompt("请输入网站地址或者本地文件路径", "D:/前端学习");

            if (filePath) {
                window.open(filePath);
            } else {

                displayAlert("info", "未提供有效的文件路径！", 1500);
            }
        });
        /***************隐藏的备用信息页面的JS部分******************************/
        window.addEventListener("load", () => {
            const open = document.querySelector(".open");
            const close = document.querySelector(".close");
            const fillScreen = document.querySelector(".model-box");
            const header = document.querySelector(".title");
            const modelBox = document.querySelector(".content");
            open.addEventListener("click", () => {
                fillScreen.style.display = "block";
            });
            close.addEventListener("click", () => {
                fillScreen.style.display = "none";
            });
            header.addEventListener("mousedown", (event) => {
                const x = event.pageX - modelBox.offsetLeft;
                const y = event.pageY - modelBox.offsetTop;
                console.log(x, y);
                document.addEventListener("mousemove", move);
                function move(event) {
                    modelBox.style.left = event.pageX - x + "px";
                    modelBox.style.top = event.pageY - y + "px";
                }
                document.addEventListener("mouseup", () => {
                    document.removeEventListener("mousemove", move);
                });
            });
        });