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

这篇具有很好参考价值的文章主要介绍了第7次修改了可删除可持久保存的前端html备忘录。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

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

 文章来源地址https://www.toymoban.com/news/detail-807491.html

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>备忘录(memorandum)</title>
    <style>
        * {
            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;
        }
    </style>
</head>

<body background="yyds.jpg" style="background-repeat:no-repeat;
background-attachment:fixed;
background-size:100% 100%; ">
    <h1>
        <dfn>备忘录
        </dfn>(memorandum)
    </h1>
    <hr>
    <textarea class="text-input-box" rows="1" cols="50%" placeholder="请输入备忘内容"></textarea><button type="text"
        class="addto">添加</button><button id="openButton">打开URL</button><input type="submit" value="查看备用信息"
        class="open" />
    <hr>
    <!--------------------- 隐藏的备用信息html盒子------------------------- -->
    <main class="model-box">
        <main class="content">
            <main class="title">
                <h2 class="xzcz">备用信息</h2>
                <i class="close">&times</i>
            </main>
            <main class="mess">
                <u>
                    &lt;a href="输入网站地址" target="_blank"&gt;
                    输入网站名称
                    &lt;/a&gt;
                </u>
                <bdi>^\s*(?=\r?$)\n
                </bdi>
                <hr>
                <button><a href="https://www.baidu.com/s" target="_blank">百度一下</a></button>
                <button><a href="https://www.runoob.com/tags/html-colorpicker.html" target="_blank"
                        title='菜鸟教程https://www.runoob.com/'>菜鸟取色器</a></button>
                <button><a href="https://blog.csdn.net/lulei5153?spm=1000.2115.3001.5343"
                        target="_blank">csdn博客</a></button>
                <button> <a href="https://w3schools.cn/" target="_blank">w3schools 教程</a></button>
                <button><a href="https://www.bilibili.com/" target="_blank">哔哩哔哩bilibili</a></button>
                <button><a href="https://www.ixigua.com/" target="_blank">西瓜视频</a></button>
                <button><a href="https://www.miyoushe.com/ys/" target="_blank">原神社区-米游社</a></button>
                <button><a
                        href="https://webstatic.mihoyo.com/ys/app/interactive-map/index.html?bbs_presentation_style=no_header&lang=zh-cn&utm_source=bbs&utm_medium=mys&utm_campaign=pcicon&_markerFps=24#/map/2?shown_types=NaN,-1084,2,3,154,17,44,45,46,64,70,18,71,77,67,72,79,73&center=2008.50,-1084.00&zoom=-3.00"
                        target="_blank">原神大地图</a></button>
            </main>
        </main>
    </main>
    <div class="text"></div>
    <script>

        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",
                `<div>
                    <input type="checkbox">
                    <button style="display: none">选择删除</button>   
                    <button style="display: none">取消</button>  
                    <button style="display: none">确定删除</button>                     
                    <span class='content ${cls}'>${val}</span>                            
                </div>`
            )
        }
        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);
                });
            });
        });
    </script>
</body>

</html>

到了这里,关于第7次修改了可删除可持久保存的前端html备忘录的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 手机备忘录怎么设置提醒 备忘录提醒设置方法

    具备提醒功能的手机备忘录有很多,比如云便签的提醒功能十分好用,不仅可设置单次定时提醒,还能添加重复提醒、重要事项提醒或到期延时提醒等,而且提醒方式也支持应用、微信、短信、电话、邮箱及手机系统日历等多种。那这款手机备忘录怎么设置提醒?备忘录提醒

    2024年02月12日
    浏览(41)
  • 苹果备忘录如何转移?备忘录怎么转移到新手机?

    对于很多苹果手机的用户而言,想必都有使用备忘录的习惯吧?但是,经过长期的使用,当需要更换手机设备时,您考虑过如何转移这些记录吗? 苹果备忘录怎么转移到新手机? 如您使用的是苹果手机内置的备忘录,并且需要更换的新设备依然是苹果手机,其解决方案非常

    2024年02月13日
    浏览(60)
  • 手机备忘录如何批量导出来,备忘录整体导出方法介绍

    手机备忘录如何批量导出来?一些品牌的手机上有自带的备忘录,大多手机自带备忘录都不支持直接批量导出,只能通过分享或复制类的功能逐条导出,手动进行整理。 除了手机自带备忘录,一些朋友会选择在自己的手机上使用云便签备忘录,不仅可以在线添加备忘录提醒事

    2024年02月16日
    浏览(49)
  • 苹果手机备忘录如何导入新手机?手机备忘录怎么转移?

    一般来说,大多数手机用户更换手机的频率是3—5年,在一部手机使用了几年之后,就会出现内存不足、系统卡顿、电池续航时间较短等问题,这时候就需要更换新的手机了。有不少苹果手机用户在更换新手机的时候,都很发愁一个问题,这就是手机备忘录如何导入新手机。

    2024年01月25日
    浏览(44)
  • 博文备忘录

    https://blog.csdn.net/ZQ_KING/article/details/80320080 (链接层)MAC地址——ARP协议 (网络层)IP地址——IP协议 (传输层)端口——UDP协议、TCP协议 (应用层)域名——HTTP协议、HTTPS协议 https://github.com/xiaomuzhu/front-end-interview/blob/master/docs/guide/http.md (http) https://github.com/xiaomuzhu/front-

    2024年02月08日
    浏览(44)
  • stata备忘录

    1. 画图 (1)时间趋势图 等价命令 字体大小 option 字体大小option description zero no size whatsoever, vanishingly small minuscule smallest quarter_tiny third_tiny half_tiny tiny vsmall small medsmall medium medlarge large vlarge huge vhuge largest tenth one-tenth the size of the graph quarter one-fourth the size of the graph third one-thi

    2024年02月03日
    浏览(42)
  • 备忘录模式(Memento)

    备忘录模式是一种行为设计模式,在不破坏封装性的前提下,允许在不暴露对象实现细节的情况下保存和恢复对象之前的状态。 一个备忘录(memento)是一个对象,它存储另一个对象在某个瞬间的内部状态,而后者称为备忘录的原发器(originator)。当需要设置原发器的检查点时,取

    2024年02月13日
    浏览(37)
  • 备忘录模式

    在不破坏封装性的前提下,捕获一个对象的内部状态,并在该对象之外保存这个状态。这样以后就可将该对象恢复到原先保存的状态。 1.1 撤销操作: 例如,在文本编辑器中,当我们对文本进行修改时,可以使用备忘录模式来实现撤销操作。每次对文本进行修改时,就保存当

    2024年02月03日
    浏览(43)
  • 设计模式(十八)备忘录

    在不破坏封装的前提下,捕获一个对象的内部状态,并在该对象之外保存这个状态,这样就可以在以后将对象恢复到原先保存的状态。备忘录模式是一种对象行为型模式,其别名为标记(Token)模式。 备忘录模式的核心在于备忘录类以及用于管理备忘录的负责人类的设计,包

    2024年02月04日
    浏览(45)
  • 安卓adb调试备忘录

    由于 MAC 的 USB 口全被占用着,采用无线连接刚方便,记录一下,以防忘记~ USB 调试 手机开启开发者选项和 USB 调试模式(通常开启方式:在关于手机连续点击7次版本号); USB 连接线和各种接口正常(个别三方数据线仅支持充电,不支持调试); 驱动状态正常(Linux 和 Mac

    2024年02月21日
    浏览(46)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包