第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日
    浏览(40)
  • 手机备忘录如何批量导出来,备忘录整体导出方法介绍

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

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

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

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

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

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

    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日
    浏览(42)
  • 备忘录模式(Memento)

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

    2024年02月13日
    浏览(37)
  • 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日
    浏览(41)
  • 备忘录模式

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

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

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

    2024年02月21日
    浏览(44)
  • C语言备忘录一

    int arr[5] = {1, 2, 3, 4, 5}😭 数组 【】中的数字大小是从一开始数,{}中的大小是从零开始数) extern extern表明变量或者函数是定义在其他其他文件中的 int a = 5与int a = 5意义是一样的,都是定义。而extern int a;是声明。但会产生一条警告; extern \\\"C\\\"的主要作用就是为了能够正确实现

    2024年02月06日
    浏览(36)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包